[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 = [], 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)的更多相关文章
- [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 ...
- [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] React Todo List Example (Toggling a Todo)
/** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( st ...
- [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- ...
随机推荐
- iOS开发之通知中心(NSNotificationCenter)
前言 面向对象的设计思想是把行为方法封装到每一个对象中,以用来增加代码的复用性.正是这种分散封装,增加了对象之间的相互关联,总是有很多的对象需要彼此了解以及相互操作! 一个简单示例说明这种交互产生的对 ...
- openssl 使用非阻塞 bio
序 在项目中需要访问 https 加密的网页,为了保证并发性,需要用到非阻塞的 socket,搜索发现,这种使用场景的相关介绍不是很多,所以这里记录一下使用的过程. 在项目中,所使用的 ssl 库是老 ...
- qt实现类似QQ伸缩窗口--鼠标事件应用
原创文章,引用请保证原文完整性,尊重作者劳动,原文地址http://blog.csdn.net/hiwubihe/article/details/38678305,qq:1269122125. 上一章 ...
- VS2012 ActiveX控件_D接口添加方法事项
自己写的是Clock控件,所以控件的接口是_DClock 使用向导添加方法后,会在紫色区域自动生成红色代码:(添加Hello方法) dispinterface _DClock { properties ...
- 跟我一起学CMake
如今CMake使用的人数越来越多,包括我项目组里,很多大牛们在写Qt程序的时候都不用自带的qmake,貌似会出现很多问题,他们往往都用自己写的CMake来编译系统,今天我也和大家一起来学学这个高大上的 ...
- mysql启动不了:ERROR 2002 (HY000): Can’t connect to local MySQL server through socket
ps aux |grep mysql kill所有列出的进程,然后重启 service mysql start 原因有可能是mysqld没启动:service mysqld start. 持续出现此问 ...
- Eclipse中使用Maven创建Servlet3.0 Web 项目
摘要 Apache Maven是一个优秀的项目构建和管理工具,许多开源项目都使用Maven进行构建.由于最近工作中要用到Maven,于是这里记录下在Eclipse中使用Maven插件创建一个基于Ser ...
- d037: 鸡兔同笼
内容: 鸡兔同笼中头的总数,脚的总数,求鸡兔各多少只 输入说明: 一行两个整数分别表示头.脚总数(保证有解,当然有可能解为0) 输出说明: 一行两个整数,分别表示鸡.兔的只数 输入样例: 20 4 ...
- Delphi 写日志的类
unit uProgLog; interface uses Windows, SysUtils, SyncObjs; const C_LOG_LEVEL_TRACE = $; C_LOG_LEVEL_ ...
- cf700A As Fast As Possible
On vacations n pupils decided to go on excursion and gather all together. They need to overcome the ...