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. maven update 以后报错。

    java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start com ...

  2. 用Hopper搞定Mac迅雷的会员以及离线下载功能

    转自 用Hopper搞定Mac迅雷的会员以及离线下载功能 先定位Mac迅雷的可执行文件 snakeninnys-iMac:~ snakeninny$ ls /Applications/Thunder. ...

  3. [转]Delphi 快捷键 让你更像高手!!

    新一篇: IDFTP 控件使用 >>代码模板 : CTRL+J >>代码整块移动 : CTRL+SHIFT+I(右移) CTRL+SHIFT+U(左移)>>选中窗体 ...

  4. cas sso单点登录系列3_cas-server端配置认证方式实践(数据源+自定义java类认证)

    转:http://blog.csdn.net/ae6623/article/details/8851801 本篇将讲解cas-server端的认证方式 1.最简单的认证,用户名和密码一致就登录成功 2 ...

  5. PHP PDO 简单登陆操作

    用PHP做出一个简单的登陆操作,确实很简单,下面就让我给大家简单的介绍一下PDO做出一个登陆界面操作的过程,因为也是初学乍练,不足之处请大家包涵. 首先,首先还要建一个表,在MySQL中建表,核心代码 ...

  6. [Head First设计模式笔记]----命令模式

    命令模式定义:将“请求”封装成对象,以便使用不同的请求.队列或者日志来参数化其他对象.命令模式也支持可撤销的操作. 类图: 适用设计方案举例:实现一种遥控器,该遥控器具有七个可编程的插槽(每个都可以指 ...

  7. 【COGS 56】质数取石子

    [问题描述] DD 和 MM 正在玩取石子游戏.他们的游戏规则是这样的:桌上有若干石子,DD 先取,轮流取,每次必须取质数个.如果某一时刻某一方无法从桌上的石子中取质数个,比如说剩下 0 个或 1 个 ...

  8. css伪元素

    CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素  "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...

  9. jquery 插件模版

    ;(function ($) { //插件的默认值属性 var defaults = { Weight: '300px', height: '230px', nextId: 'nextBtn', ne ...

  10. PHP图的绘制1

    最近在学习php图的绘制,写的代码放上来,供自己以后学习查看: <?php //*函数说明: //这个函数返回的是 // resource imagecreate ( int $x_size , ...