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. UITabBarController自定义二之xib

    UITabBarController自定义二之xib 新建一个xib文件 在UITabBarController的子类方法viewDidLoad方法中加载xib 1.-(void)viewDidLoa ...

  2. <blockquote>标签,长文本引用

    <blockquote>的作用也是引用别人的文本.但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签. 等等,上一节<q>标签不是也是对文本的引用吗?不 ...

  3. 【OpenSSL】创建证书

    [-] 1生成根证书 1 生成RSA私钥 2 生成证书请求 3 签发自签名证书 2 生成用户证书 1 生成RSA私钥 2 生成证书请求 3 签发证书   1)生成根证书 1.1) 生成RSA私钥 op ...

  4. Visual Studio 2010 单元测试目录

    单元测试的重要性这里我就不多说了,以前大家一直使用NUnit来进行单元测试,其实早在Visual Studio 2005里面,微软就已经集成了一个叫Test的专门测试插件,经过几年的发展,这个工具现在 ...

  5. hdu 3371 Connect the Cities (最小生成树Prim)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=3371 题目不难 稍微注意一下 要把已经建好的城市之间的花费定义为0,在用普通Prim算法就可以了:我没 ...

  6. 解决easyui-tab添加tab滚动条问题

    //添加tab var addTab = function (title, url, icon) { if (!$('#mainTab').tabs('exists', title)) { $('#m ...

  7. 机器学习(4)之Logistic回归

    机器学习(4)之Logistic回归 1. 算法推导 与之前学过的梯度下降等不同,Logistic回归是一类分类问题,而前者是回归问题.回归问题中,尝试预测的变量y是连续的变量,而在分类问题中,y是一 ...

  8. 在CentOS6上使用YUM安装php5.5.x

    这里使用 Webtatic EL6的YUM源来安装php5.5,我们首页安装Webtatic EL6 YUM源 rpm -Uvh http://repo.webtatic.com/yum/el6/la ...

  9. nutch fetcher.server.delay

    1 配置因素 <property>  <name>fetcher.server.delay</name>  <value>0.0</value&g ...

  10. DEDECMS调用最新评论

    {dede:feedback row='5' titlelen='24' infolen='80'} <div class="yhplk"><div>[fi ...