[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- ...
随机推荐
- 第一章 Javascript基础
一.Javascript概述(知道) a.一种基于对象和事件驱动的脚本语言 b.作用: 给页面添加动态效果 c.历史: 原名叫做livescript.W3c组织开发的标准叫ECMAscipt. d.特 ...
- http请求的cookie
Cookie的作用: Cookie是用于维持服务端会话状态的,通常由服务端写入,在后续请求中,供服务端读取. HTTP请求,Cookie的使用过程 1.server通过HTTP Response中的& ...
- js 函数参数形式
1. var a = function(b,c){ console.log(arguments);}a("1","cc"); -> ["1&q ...
- [LeetCode OJ] Linked List Cycle II—Given a linked list, return the node where the cycle begins. If there is no cycle, return null.
/** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...
- 谈谈IT人的发展[转载]
一个人如果能确定他喜欢的行业,他一生都会非常幸福. 相反,则往往痛苦,也许竟然会因此成为一个哲学家也说不定. 中国的贫穷决定了我们当中的大多数人不能根据自己的爱好来选择职业,而只是因为生活所迫,或 ...
- JS响应事件整理
javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
- js学习笔记之:时间(一)
日期和时间是javaScript中常用的对象,可以通过此对象判断星期.生日.纪念日等,提高网站的人性化.下面将通过实例来介绍一下学习javaScript中有关时间和日期的知识点: (1)日期和时间函数 ...
- Thinkphp 表单验证
在服务器端通过tp框架实现表单验证 用户名.密码.重复密码.邮箱.qq.手机号码.爱好.学历 具体步骤: 制作表单 表单form数据通过create()方法收集(验证功能要求我们必须通过create( ...
- mac 下 配置 阿帕奇
1.从 tomcat 官网(http://tomcat.apache.org/download-90.cgi)下载 完整的 tomcat包. 2.将红框中的包下载完,然后解压到任意一个目录,将其命名为 ...
- Java中关键字super与this的区别
一.super关键字 在JAVA类中使用super来引用父类的成分,用this来引用当前对象,如果一个类从另外一个类继承,我们new这个子类的实例对象的时候,这个子类对象里面会有一个父类对象.怎么去引 ...