[Redux] Writing a Todo List Reducer (Toggling a Todo)
Learn how to implement toggling a todo in a todo list application reducer.
let todo = (state = [], action) => { switch(action.type){
case 'ADD_ITEM':
return state = [
...state,
{
text: action.text,
id: action.id,
completed: false
}
];
case 'TOGGLE_ITEM':
return state.map( (todo) => {
if(todo.id !== action.id){
return todo;
}else{
return {
...todo,
completed: !todo.Completed// will overwirte the todo object's completed prop
};
}
})
default:
return state;
}
}; let testTodo_addItem = () => {
let stateBefore = [];
let action = {
type: 'ADD_ITEM',
text: 'Learn Redux',
id: 0
};
let stateAfter = [
{
text: 'Learn Redux',
id: 0,
completed: false,
}
]; deepFreeze(stateBefore);
deepFreeze(action); expect(
todo(stateBefore, action)
).toEqual(stateAfter);
}; let testTodo_toggleItem = () => {
let stateBefore = [
{
text: 'Learn Redux',
id: 0,
completed: false
},
{
text: 'Learn Angular2',
id: 1,
completed: false
}
];
let action = {
type: 'TOGGLE_ITEM',
id: 1
}; let stateAfter = [
{
text: 'Learn Redux',
id: 0,
completed: false
},
{
text: 'Learn Angular2',
id: 1,
completed: true
}
]; deepFreeze(stateBefore);
deepFreeze(action); expect(
todo(stateBefore, action)
).toEqual(stateAfter);
} testTodo_toggleItem(); console.log("All tests passed!");
[Redux] Writing a Todo List Reducer (Toggling a Todo)的更多相关文章
- [Redux] Writing a Todo List Reducer (Adding a Todo)
Learn how to implement adding a todo in a todo list application reducer. let todo = (state = [], act ...
- [Redux] React Todo List Example (Toggling a Todo)
/** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( st ...
- [Redux] React Todo List Example (Adding a Todo)
Learn how to create a React todo list application using the reducers we wrote before. /** * A reduce ...
- [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] React Todo List Example (Filtering Todos)
/** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( st ...
- [Redux] Extracting Presentational Components -- Todo, TodoList
Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todo ...
- 实例讲解react+react-router+redux
前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...
- Redux你的Angular 2应用--ngRx使用体验
Angular2和Rx的相关知识可以看我的Angular 2.0 从0到1系列第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2 ...
- [Redux] Normalizing the State Shape
We will learn how to normalize the state shape to ensure data consistency that is important in real- ...
随机推荐
- Google2016开发者大会
Android主讲: 一.吴晶:android笔记博主(博客:http://www.race604.com/) 主题:Android低功耗蓝牙(BLE)实践 低功耗蓝牙在可穿戴和智能家居里边用的比较多 ...
- ASP.NET菜鸟之路之Request小例子
背景 我是一个ASP.NET菜鸟,暂时开始学习ASP.NET,在此记录下我个人敲的代码,没有多少参考价值,请看到的盆友们为我点个赞支持我一下,多谢了. Request获取值 Request获取值有两种 ...
- Ext Sencha Cmd 6 环境安装
Sencha Cmd安装笔记 在使用前端框架ExtJs前,需对其环境加以部署,对自己的安装过程加以记录. 建议大家在安装时,最好使用VPN,个中缘由,生在跳槽的程序袁应该都懂吧.不然ruby相关命令执 ...
- javascript获取地址栏参数/值
//URL: http://www.example.com/?var1=val1&var2=val2=val3&test=3&test=43&aaa=#2 //wind ...
- 织梦DedeCMS子目录移动到根目录的方法
有时候我们在子目录中安装了dedecms,但有时候需要将其换到根目录中,下面就讲一下织梦DedeCMS子目录移动到根目录的方法: 下面是具体的操作步骤,强烈建议先备份数据库. 1.进入dedecms后 ...
- 阻塞和非阻塞socket的区别
读操作 对于阻塞的socket,当socket的接收缓冲区中没有数据时,read调用会一直阻塞住,直到有数据到来才返回.当socket缓冲区中的数据量小于期望读取的数据量时,返回实际读取的字节数.当s ...
- 12100 Printer Queue(优先队列)
12100 Printer Queue12 The only printer in the computer science students’ union is experiencing an ex ...
- jQuery的live绑定事件在mobile safari(iphone / ipad / ipod)上失效的解决方案
jQuery的live绑定为什么会在mobile safari上失效呢?其实可以追溯到jQuery里live的实现方式.live的实现方式实际上是通过事件委托机制来实现的,也就是说是通过诸如冒泡的方式 ...
- Solr4.8.0源码分析(11)之Lucene的索引文件(4)
Solr4.8.0源码分析(11)之Lucene的索引文件(4) 1. .dvd和.dvm文件 .dvm是存放了DocValue域的元数据,比如DocValue偏移量. .dvd则存放了DocValu ...
- (未解决)问题记录ionic android 签名之后安装到手机上点击运行出现闪退,不签名运行正常
Log日志如下: - ::): error opening trace ) - ::): FATAL EXCEPTION: main - ::): java.lang.RuntimeException ...