[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- ...
随机推荐
- maven update 以后报错。
java.util.concurrent.ExecutionException: org.apache.catalina.LifecycleException: Failed to start com ...
- 用Hopper搞定Mac迅雷的会员以及离线下载功能
转自 用Hopper搞定Mac迅雷的会员以及离线下载功能 先定位Mac迅雷的可执行文件 snakeninnys-iMac:~ snakeninny$ ls /Applications/Thunder. ...
- [转]Delphi 快捷键 让你更像高手!!
新一篇: IDFTP 控件使用 >>代码模板 : CTRL+J >>代码整块移动 : CTRL+SHIFT+I(右移) CTRL+SHIFT+U(左移)>>选中窗体 ...
- cas sso单点登录系列3_cas-server端配置认证方式实践(数据源+自定义java类认证)
转:http://blog.csdn.net/ae6623/article/details/8851801 本篇将讲解cas-server端的认证方式 1.最简单的认证,用户名和密码一致就登录成功 2 ...
- PHP PDO 简单登陆操作
用PHP做出一个简单的登陆操作,确实很简单,下面就让我给大家简单的介绍一下PDO做出一个登陆界面操作的过程,因为也是初学乍练,不足之处请大家包涵. 首先,首先还要建一个表,在MySQL中建表,核心代码 ...
- [Head First设计模式笔记]----命令模式
命令模式定义:将“请求”封装成对象,以便使用不同的请求.队列或者日志来参数化其他对象.命令模式也支持可撤销的操作. 类图: 适用设计方案举例:实现一种遥控器,该遥控器具有七个可编程的插槽(每个都可以指 ...
- 【COGS 56】质数取石子
[问题描述] DD 和 MM 正在玩取石子游戏.他们的游戏规则是这样的:桌上有若干石子,DD 先取,轮流取,每次必须取质数个.如果某一时刻某一方无法从桌上的石子中取质数个,比如说剩下 0 个或 1 个 ...
- css伪元素
CSS 伪元素用于向某些选择器设置特殊效果. 1.:first-line 伪元素 "first-line" 伪元素用于向文本的首行设置特殊样式.注意:"first-li ...
- jquery 插件模版
;(function ($) { //插件的默认值属性 var defaults = { Weight: '300px', height: '230px', nextId: 'nextBtn', ne ...
- PHP图的绘制1
最近在学习php图的绘制,写的代码放上来,供自己以后学习查看: <?php //*函数说明: //这个函数返回的是 // resource imagecreate ( int $x_size , ...