Learn how to implement adding 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
}
];
default:
return state;
}
}; let testTodo = () => {
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);
}; testTodo(); console.log("All tests passed!");

[Redux] Writing a Todo List Reducer (Adding a Todo)的更多相关文章

  1. [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 = [], a ...

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

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

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

  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. Smarty环境配置

    Smaty优点:1.代码分离 2.缓存技术 使用步骤: 1.下载Smaty模板 2.将模板中那个lib文件夹复制到项目中(一般为根目录,并且重命名在此命名为Smarty), 3.配置PHP 1.新建一 ...

  3. [转载]__type_traits

    在STL中为了提供通用的操作而又不损失效率,我们用到了一种特殊的技巧,叫traits编程技巧.具体的来说,traits就是 通过定义一些结构体或类,并利用模板类特化和偏特化的能力,给类型赋予一些特性, ...

  4. 你好,C++(4)2.1.3 我的父亲母亲:编译器和链接器 2.1.4 C++程序执行背后的故事

    2.1.3  我的父亲母亲:编译器和链接器 从表面上看,我是由Visual Studio创建的,而实际上,真正负责编译源代码创建生成可执行程序HelloWorld.exe的却是Visual Studi ...

  5. Taxi Cab Scheme POJ && HDU

    Online Judge Problem Set Authors Online Contests User Web Board Home Page F.A.Qs Statistical Charts ...

  6. Android学习----打印日志Log

    Log.v(tag,msg);所有内容 Log.d(tag,msg);debug Log.i(tag,msg);一般信息 Log.w(tag,msg);警告信息 Log.e(tag,msg);错误信息 ...

  7. sizeof(int *) 和 sizeof(int)型的大小问题

    小问题,暂时记录注意一下   printf("sizeof(int): %d\n", (int)sizeof(int));     printf("sizeof(int ...

  8. python ATM购物程序

    需求: 模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 每月22号出账单,每月10号为还款日,过期未还,按欠 ...

  9. S5PV210启动过程分析

    一.三星官方推荐方式 1.数据手册<S5PV210_iROM_Application_note>中截取:

  10. Git之路——Git的使用

    centos6.6安装git2.4 第一安装编译环境: yum -y install zlib-devel openssl-devel perl cpio expat-devel gettext-de ...