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. iOS 中Window优先级的问题

    在项目中,视频播放时候遇到网络切换需要弹出AlertView提醒用户,忽然发现转屏的时候播放View加到KeyWindow的时候把AleryView挡住了.如图 因为转屏的时候视图是直接加载到 [UI ...

  2. UITouch触摸事件

    UITouch触摸事件 主要为三个方法 1.-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{2.3. UITouch * ...

  3. 用css样式,为表格加入边框

    Table 表格在没有添加 css 样式之前,是没有边框的.这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框. 在右侧代码编辑器中添加如下代码: <s ...

  4. 4.HTTP入门

    什么是http协议查看http协议的工具http协议内容Http请求请求行http协议版本请求资源请求方式GET方式提交POST方式提交请求头3.3 实体内容3.4 HttpServletReques ...

  5. vs2012快捷键

    (1)自己整理的使用频率最高的快捷键(建议大家亲身体验一下!这样才会在潜移默化中运用得到!) (这里省去了很多大家闭上眼都会操作的什么Ctrl+S 等等操作 给出的大多是不常用但是很有用的快捷键组合! ...

  6. [LeetCode OJ] Max Points on a Line—Given n points on a 2D plane, find the maximum number of points that lie on the same straight line.

    //定义二维平面上的点struct Point { int x; int y; Point(, ):x(a),y(b){} }; bool operator==(const Point& le ...

  7. 【USACO 2.3.1】最长前缀

    [题目描述] 在生物学中,一些生物的结构是用包含其要素的大写字母序列来表示的.生物学家对于把长的序列分解成较短的序列(即元素)很感兴趣. 如果一个集合 P 中的元素可以通过串联(元素可以重复使用,相当 ...

  8. 完数c实现

    完数,顾名思义,就是一个数如果恰好等于它的因子之和.例如6=1+2+3.编写找出1000以内的所有完数 #include <stdio.h> #include <stdlib.h&g ...

  9. App Store自动下载WiFi与蜂窝数据切换机制

    写下这个给自己备忘,上次也有一次载了个跟头. 在iOS 7和8里面,除了设置--App Store里面自动更新,自动下载,以及使用蜂窝数据要关之外,别以为用了WiFi挂着程序,就万无一失了. 这种情况 ...

  10. 导出页面文档(只在IE8下测试过)

    之前说过一篇关于打印的方法,就顺便也看了一下导出,但是该方法需要用户更改浏览器的安全级别设置,因此并不十分推荐,大家如真有需要可以参考一下ZeroClipboard这款插件,我有时间也会去学习一下并贴 ...