[Redux] Composition with Objects
For example, current we have those todos:
{
todos: [ {
completed: true,
id: 0,
text: "Learn Redux"
}, {
completed: false,
id: 1,
text: "Go shopping"
}],
}
And now what we want to do is add a 'visibilityFilter' prop to the object, composition with object enables us easily create a new reducer that calls the existing reducers to manage parts of its state and combines the results in a single state object and we don't need to change our current reducer.
Our current reducer:
const todo = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
completed: false
};
case 'TOGGLE_TODO':
if (state.id !== action.id) {
return state;
} return {
...state,
completed: !state.completed
};
default:
return state;
}
}; const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
todo(undefined, action)
];
case 'TOGGLE_TODO':
return state.map(t => todo(t, action));
default:
return state;
}
}; const todoApp = (state = {}, action) => {
return {
todos: todos(
state.todos,
action
)
};
};
Add a new reducer:
const todo = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
completed: false
};
case 'TOGGLE_TODO':
if (state.id !== action.id) {
return state;
} return {
...state,
completed: !state.completed
};
default:
return state;
}
}; const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
todo(undefined, action)
];
case 'TOGGLE_TODO':
return state.map(t => todo(t, action));
default:
return state;
}
}; const visibilityFilter = (
state="SHOW_ALL",
action
) => {
switch(action.type){
case 'SET_VISIBILITY_FILTER':
return action.filter;
break;
default:
return state;
}
} const todoApp = (state = {}, action) => {
return {
todos: todos(
state.todos,
action
),
visibilityFilter: visibilityFilter(
state.visibilityFilter,
action
)
};
};
-------------------
const todo = (state, action) => {
switch (action.type) {
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
completed: false
};
case 'TOGGLE_TODO':
if (state.id !== action.id) {
return state;
} return {
...state,
completed: !state.completed
};
default:
return state;
}
}; const todos = (state = [], action) => {
switch (action.type) {
case 'ADD_TODO':
return [
...state,
todo(undefined, action)
];
case 'TOGGLE_TODO':
return state.map(t => todo(t, action));
default:
return state;
}
}; const visibilityFilter = (
state = 'SHOW_ALL',
action
) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state;
}
}; const todoApp = (state = {}, action) => {
return {
todos: todos(
state.todos,
action
),
visibilityFilter: visibilityFilter(
state.visibilityFilter,
action
)
};
}; const { createStore } = Redux;
const store = createStore(todoApp); console.log('Initial state:');
console.log(store.getState());
console.log('--------------'); console.log('Dispatching ADD_TODO.');
store.dispatch({
type: 'ADD_TODO',
id: 0,
text: 'Learn Redux'
});
console.log('Current state:');
console.log(store.getState());
console.log('--------------'); console.log('Dispatching ADD_TODO.');
store.dispatch({
type: 'ADD_TODO',
id: 1,
text: 'Go shopping'
});
console.log('Current state:');
console.log(store.getState());
console.log('--------------'); console.log('Dispatching TOGGLE_TODO.');
store.dispatch({
type: 'TOGGLE_TODO',
id: 0
});
console.log('Current state:');
console.log(store.getState());
console.log('--------------'); console.log('Dispatching SET_VISIBILITY_FILTER');
store.dispatch({
type: 'SET_VISIBILITY_FILTER',
filter: 'SHOW_COMPLETED'
});
console.log('Current state:');
console.log(store.getState());
console.log('--------------');
"Initial state:"
[object Object] {
todos: [],
visibilityFilter: "SHOW_ALL"
}
"--------------"
"Dispatching ADD_TODO."
"Current state:"
[object Object] {
todos: [[object Object] {
completed: false,
id: 0,
text: "Learn Redux"
}],
visibilityFilter: "SHOW_ALL"
}
"--------------"
"Dispatching ADD_TODO."
"Current state:"
[object Object] {
todos: [[object Object] {
completed: false,
id: 0,
text: "Learn Redux"
}, [object Object] {
completed: false,
id: 1,
text: "Go shopping"
}],
visibilityFilter: "SHOW_ALL"
}
"--------------"
"Dispatching TOGGLE_TODO."
"Current state:"
[object Object] {
todos: [[object Object] {
completed: true,
id: 0,
text: "Learn Redux"
}, [object Object] {
completed: false,
id: 1,
text: "Go shopping"
}],
visibilityFilter: "SHOW_ALL"
}
"--------------"
"Dispatching SET_VISIBILITY_FILTER"
"Current state:"
[object Object] {
todos: [[object Object] {
completed: true,
id: 0,
text: "Learn Redux"
}, [object Object] {
completed: false,
id: 1,
text: "Go shopping"
}],
visibilityFilter: "SHOW_COMPLETED"
}
"--------------"
[Redux] Composition with Objects的更多相关文章
- [Redux] Reducer Composition with combineReducers()
Previous, we do composition with objects: const todoApp = (state = {}, action) => { return { todo ...
- 关联,聚合和组合(复合)--Association, Aggregation and Composition
概要 Association, Aggregation and Composition are terms that represent relationships among objects. Th ...
- 【OOAD】面向对象设计原则概述
软件的可维护性和可复用性 知名软件大师Robert C.Martin认为一个可维护性(Maintainability) 较低的软件设计,通常由于如下4个原因造成: 过于僵硬(Rigidity) ...
- Java Programming Guidelines
This appendix contains suggestions to help guide you in performing low-level program design and in w ...
- DVB-subtitle解析流程浅
DTV包含SUBTITLE和TTX. PMT中分别有不同的描述符对应,如下图的TTX descripter=0x56.语言ISO-639="fin" subtitle descri ...
- Object Pascal中文手册 经典教程
Object Pascal 参考手册 (Ver 0.1)ezdelphi@hotmail.com OverviewOverview(概述)Using object pascal(使用 object p ...
- [Redux] Reducer Composition with Arrays
In the previous lesson we created a reducer that can handle two actions, adding a new to-do, and tog ...
- Redux源码学习笔记
https://github.com/reduxjs/redux 版本 4.0.0 先了解一下redux是怎么用的,此处摘抄自阮一峰老师的<Redux 入门教程> // Web 应用是一个 ...
- redux源码解析-函数式编程
提到redux,会想到函数式编程.什么是函数式编程?是一种很奇妙的函数式的编程方法.你会感觉函数式编程这么简单,但是用起来却很方便很神奇. 在<functional javascript> ...
随机推荐
- MySQL 创建数据表
MySQL 创建数据表 创建MySQL数据表需要以下信息: 表名 表字段名 定义每个表字段 语法 以下为创建MySQL数据表的SQL通用语法: CREATE TABLE table_name (col ...
- Extjs中grid表格中去掉红三角
在编辑Extjs的gridpanel的时候,数据有错误或是修改在每个单元格上都会出现红色的小三角,在每个列上面可以配置allowBlank: false来标识这个不可以为空 有的时候在保存数据时如果不 ...
- Thinkphp 文本编辑器
文本编辑器:可以从网上下载---ueditor文件夹里面包含php和utf8-php两个文件夹 平时使用时主要用到获取内容和写入内容两个按钮 获取内容: <!DOCTYPE html PUBLI ...
- EclipsePHP Studio 常用设置笔记
工作需要,学习PHP使用EclipsePHP Studio开发工具, 习惯整理下常用的使用设置,分享一下吧: 1.窗口-首选项-常规-工作空间,把文本文件编码改为utf8,以后再新建文件就默认是utf ...
- MongoDB-GRIDFS大文件系统
gridfs 是一种在mongodb中存储大二进制文件的机制,使用gridfs的原因: 1.存储巨大的文件(视频图片). 2.利用GRIDFS可以简化需求. 3.GRIDFS 利用已经建立起来的复制以 ...
- Sql 格式化工具
SQL Pretty Printer:目前提供4种使用方式,桌面版本,SSMS(SQL Server Management Studio)插件,VS插件,和提供API接口. SQL Pretty Pr ...
- Routing
假如有一个请求:localhost/home/index,那么路由需要做的事情如下: (1)确定Controller (2)确定Action (3)确定其他参数 (4)根据识别出来的数据,将请求传递给 ...
- 温故而知新 C++ 数组与指针
#include <stdio.h> using namespace std; int main(int argc, _TCHAR* argv[]) { ]; ] = {,,,}; &qu ...
- 转:Centos6.3添加解码器播放MP3和常见视频音频
原文来自于:http://blog.csdn.net/odaynot/article/details/8462273 参考地址: http://wiki.centos.org/AdditionalRe ...
- Html Meta 标签详解
http://www.dreamdu.com/xhtml/tag_meta/