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

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

  2. [Redux] React Todo List Example (Toggling a Todo)

    /** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( st ...

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

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

  5. [Redux] React Todo List Example (Filtering Todos)

    /** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( st ...

  6. [Redux] Extracting Presentational Components -- Todo, TodoList

    Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todo ...

  7. 实例讲解react+react-router+redux

    前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应 ...

  8. Redux你的Angular 2应用--ngRx使用体验

    Angular2和Rx的相关知识可以看我的Angular 2.0 从0到1系列第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2 ...

  9. [Redux] Normalizing the State Shape

    We will learn how to normalize the state shape to ensure data consistency that is important in real- ...

随机推荐

  1. Google2016开发者大会

    Android主讲: 一.吴晶:android笔记博主(博客:http://www.race604.com/) 主题:Android低功耗蓝牙(BLE)实践 低功耗蓝牙在可穿戴和智能家居里边用的比较多 ...

  2. ASP.NET菜鸟之路之Request小例子

    背景 我是一个ASP.NET菜鸟,暂时开始学习ASP.NET,在此记录下我个人敲的代码,没有多少参考价值,请看到的盆友们为我点个赞支持我一下,多谢了. Request获取值 Request获取值有两种 ...

  3. Ext Sencha Cmd 6 环境安装

    Sencha Cmd安装笔记 在使用前端框架ExtJs前,需对其环境加以部署,对自己的安装过程加以记录. 建议大家在安装时,最好使用VPN,个中缘由,生在跳槽的程序袁应该都懂吧.不然ruby相关命令执 ...

  4. javascript获取地址栏参数/值

    //URL: http://www.example.com/?var1=val1&var2=val2=val3&test=3&test=43&aaa=#2 //wind ...

  5. 织梦DedeCMS子目录移动到根目录的方法

    有时候我们在子目录中安装了dedecms,但有时候需要将其换到根目录中,下面就讲一下织梦DedeCMS子目录移动到根目录的方法: 下面是具体的操作步骤,强烈建议先备份数据库. 1.进入dedecms后 ...

  6. 阻塞和非阻塞socket的区别

    读操作 对于阻塞的socket,当socket的接收缓冲区中没有数据时,read调用会一直阻塞住,直到有数据到来才返回.当socket缓冲区中的数据量小于期望读取的数据量时,返回实际读取的字节数.当s ...

  7. 12100 Printer Queue(优先队列)

    12100 Printer Queue12 The only printer in the computer science students’ union is experiencing an ex ...

  8. jQuery的live绑定事件在mobile safari(iphone / ipad / ipod)上失效的解决方案

    jQuery的live绑定为什么会在mobile safari上失效呢?其实可以追溯到jQuery里live的实现方式.live的实现方式实际上是通过事件委托机制来实现的,也就是说是通过诸如冒泡的方式 ...

  9. Solr4.8.0源码分析(11)之Lucene的索引文件(4)

    Solr4.8.0源码分析(11)之Lucene的索引文件(4) 1. .dvd和.dvm文件 .dvm是存放了DocValue域的元数据,比如DocValue偏移量. .dvd则存放了DocValu ...

  10. (未解决)问题记录ionic android 签名之后安装到手机上点击运行出现闪退,不签名运行正常

    Log日志如下: - ::): error opening trace ) - ::): FATAL EXCEPTION: main - ::): java.lang.RuntimeException ...