[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- ...
随机推荐
- oracle中使用minus进行数据排除(类似SqlServer except函数)
minus这个集合操作符号的作用是从一个结果集合中减掉另一个结果集中数据,也就是说从一个结果集中去除两个结果集中的共有部分. 下面是一些例子: 这个例子使用minus从第一个结果集中将两个结果集的公有 ...
- excel - 统计字符个数综合案例
本文通过一个综合的案例来介绍excel统计字符数的一些方法和思路,供大家参考和学习. 下图是一个excel数据源截图,我们逐一讲解不同条件的统计字符数. 第一,统计A2所有的字符数,不论是汉字和数字. ...
- PHP MySQL 读取数据
PHP MySQL 读取数据 从 MySQL 数据库读取数据 SELECT 语句用于从数据表中读取数据: SELECT column_name(s) FROM table_name 如需学习更多关于 ...
- This system is not registered with RHN解决方法
root@localhost ipvsadm-1.25]# yum install gcc Loading "security" plugin Loading "rhnp ...
- 《InsideUE4》UObject(三)类型系统设定和结构
垃圾分类,从我做起! 引言 上篇我们谈到了为何设计一个Object系统要从类型系统开始做起,并探讨了C#的实现,以及C++中各种方案的对比,最后得到的结论是UE采用UHT的方式搜集并生成反射所需代码. ...
- JavaScript--循环--打印星星和99乘法表
1.打印99乘法表 function chengfa(){ //反复调用公式 for(var r=1;r<=9;r++){ for(var i=1,str="";i<= ...
- 命令行bash的基础操作
刚进入系统在光标前面会显示这样一串字符[root@centeros ~]# root表示当前的登录用户可以通过id命令查看 centeros表当前的主机名可以通过hostname查看 ~表示当前用户的 ...
- RemoteWebDriver使用说明
1. 本地代码使用RemoteWebDriver启动: public class Testing { public void myTest()throws Exception { WebDriver ...
- YesFInder - Web File Manager 网页文件管理系统
开发原由: 原来想找一下实现可视化图片上传程序,先找了ckfinder,发现居然是收费的,而且用起来也不顺手,于是想能不能自己写一个.想到这就立即动手,花2天时间完成初步功能,然后再花了3天完善.目前 ...
- Bootstrap_排版_列表
一.基本列表 <h5>普通列表</h5> <ul> <li>列表项目</li> <li>列表项目</li> < ...