[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- ...
随机推荐
- (转帖) 如何將值delay n個clock? (SOC) (Verilog)
来源:http://www.cnblogs.com/oomusou/archive/2009/06/15/verilog_dly_n_clk.html /* (C) OOMusou 2009 http ...
- 直接拿来用的15个jQuery代码片段
1.预加载图片 1 2 3 4 5 6 7 8 9 10 11 12 (function($) { var cache = []; // Arguments are image paths r ...
- 四大跨平台的APP分析
转载:http://blog.csdn.net/kenkao/article/details/50678269
- cas sso入门(转)
转:http://blog.csdn.net/frinder/article/details/7969925 一.教程说明 前言 教程目的:从头到尾细细道来单点登录服务器及客户端应用的每个步骤 单点登 ...
- Hibernate 性能优化之查询缓存
查询缓存是建立在二级缓存基础之上的,所以与二级缓存特性相似,是共享的,适合修改不是很频繁的数据 查询缓存不是默认开启的,需要设置 1.在cfg文件中配置 <property name= ...
- 【USACO 2.2.4】派对灯
[描述] 在IOI98的节日宴会上,我们有N(10<=N<=100)盏彩色灯,他们分别从1到N被标上号码. 这些灯都连接到四个按钮: 按钮1:当按下此按钮,将改变所有的灯:本来亮着的灯就熄 ...
- svn更新
下载配置文件 pwd cd /home/www/xxxx/protected/config/ get main.php 上传配置文件 put main.php svn更新 svn co svn://s ...
- ftp文件操作
PHP FTP操作类( 上传.拷贝.移动.删除文件/创建目录 ) 2016-06-01 PHP编程 /** * 作用:FTP操作类( 拷贝.移动.删除文件/创建目录 ) */ class class_ ...
- JavaScript-学习一全局变量
因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量. 局部变量在函数开始执行时创建,函数执行完后局部变量会自动销 不限制位置的 JavaScript 变量生命周期在它声明时初始化. 局部 ...
- Chrome不支持本地Ajax请求解决?
今天用JQuery操作Ajax时,使用load方法加载html块 结果提示: XMLHttpRequest cannot load file~~~~~~~Origin 'null' is theref ...