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的更多相关文章

  1. [Redux] Reducer Composition with combineReducers()

    Previous, we do composition with objects: const todoApp = (state = {}, action) => { return { todo ...

  2. 关联,聚合和组合(复合)--Association, Aggregation and Composition

    概要 Association, Aggregation and Composition are terms that represent relationships among objects. Th ...

  3. 【OOAD】面向对象设计原则概述

    软件的可维护性和可复用性 知名软件大师Robert C.Martin认为一个可维护性(Maintainability) 较低的软件设计,通常由于如下4个原因造成: 过于僵硬(Rigidity)  ...

  4. Java Programming Guidelines

    This appendix contains suggestions to help guide you in performing low-level program design and in w ...

  5. DVB-subtitle解析流程浅

    DTV包含SUBTITLE和TTX. PMT中分别有不同的描述符对应,如下图的TTX descripter=0x56.语言ISO-639="fin" subtitle descri ...

  6. Object Pascal中文手册 经典教程

    Object Pascal 参考手册 (Ver 0.1)ezdelphi@hotmail.com OverviewOverview(概述)Using object pascal(使用 object p ...

  7. [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 ...

  8. Redux源码学习笔记

    https://github.com/reduxjs/redux 版本 4.0.0 先了解一下redux是怎么用的,此处摘抄自阮一峰老师的<Redux 入门教程> // Web 应用是一个 ...

  9. redux源码解析-函数式编程

    提到redux,会想到函数式编程.什么是函数式编程?是一种很奇妙的函数式的编程方法.你会感觉函数式编程这么简单,但是用起来却很方便很神奇. 在<functional javascript> ...

随机推荐

  1. MySQL 创建数据表

    MySQL 创建数据表 创建MySQL数据表需要以下信息: 表名 表字段名 定义每个表字段 语法 以下为创建MySQL数据表的SQL通用语法: CREATE TABLE table_name (col ...

  2. Extjs中grid表格中去掉红三角

    在编辑Extjs的gridpanel的时候,数据有错误或是修改在每个单元格上都会出现红色的小三角,在每个列上面可以配置allowBlank: false来标识这个不可以为空 有的时候在保存数据时如果不 ...

  3. Thinkphp 文本编辑器

    文本编辑器:可以从网上下载---ueditor文件夹里面包含php和utf8-php两个文件夹 平时使用时主要用到获取内容和写入内容两个按钮 获取内容: <!DOCTYPE html PUBLI ...

  4. EclipsePHP Studio 常用设置笔记

    工作需要,学习PHP使用EclipsePHP Studio开发工具, 习惯整理下常用的使用设置,分享一下吧: 1.窗口-首选项-常规-工作空间,把文本文件编码改为utf8,以后再新建文件就默认是utf ...

  5. MongoDB-GRIDFS大文件系统

    gridfs 是一种在mongodb中存储大二进制文件的机制,使用gridfs的原因: 1.存储巨大的文件(视频图片). 2.利用GRIDFS可以简化需求. 3.GRIDFS 利用已经建立起来的复制以 ...

  6. Sql 格式化工具

    SQL Pretty Printer:目前提供4种使用方式,桌面版本,SSMS(SQL Server Management Studio)插件,VS插件,和提供API接口. SQL Pretty Pr ...

  7. Routing

    假如有一个请求:localhost/home/index,那么路由需要做的事情如下: (1)确定Controller (2)确定Action (3)确定其他参数 (4)根据识别出来的数据,将请求传递给 ...

  8. 温故而知新 C++ 数组与指针

    #include <stdio.h> using namespace std; int main(int argc, _TCHAR* argv[]) { ]; ] = {,,,}; &qu ...

  9. 转:Centos6.3添加解码器播放MP3和常见视频音频

    原文来自于:http://blog.csdn.net/odaynot/article/details/8462273 参考地址: http://wiki.centos.org/AdditionalRe ...

  10. Html Meta 标签详解

    http://www.dreamdu.com/xhtml/tag_meta/