Learn how to implement toggling 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 } ]; case 'TOGGLE_IT…

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 s…

/** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( state, action ) => { switch ( action.type ) { case 'ADD_TODO': return { id: action.id, text: action.text, completed: false }; case 'TOGGLE_TODO': if ( s…

Learn how to create a React todo list application using the reducers we wrote before. /** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( state, action ) => { switch ( action.type ) { case 'ADD_TODO': ret…

In the previous lesson we created a reducer that can handle two actions, adding a new to-do, and toggling an existing to-do. Right now, the code to update the to-do item or to create a new one is placed right inside of the to-dos reducer. This functi…

/** * A reducer for a single todo * @param state * @param action * @returns {*} */ const todo = ( state, action ) => { switch ( action.type ) { case 'ADD_TODO': return { id: action.id, text: action.text, completed: false }; case 'TOGGLE_TODO': if ( s…

Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todos, visibilityFilter } = this.props; const visibleTodos = getVisibleTodos( todos, visibilityFilter ); return ( <div> <input ref={node => { this.…

前言 总括: 本文采用react+redux+react-router+less+es6+webpack,以实现一个简易备忘录(todolist)为例尽可能全面的讲述使用react全家桶实现一个完整应用的过程. 代码地址:React全家桶实现一个简易备忘录 原文博客地址:React全家桶实现一个简易备忘录 知乎专栏&&简书专题:前端进击者(知乎)&&前端进击者(简书) 博主博客地址:Damonare的个人博客 人生不失意,焉能暴己知. 技术说明 技术架构:本备忘录使用rea…

Angular2和Rx的相关知识可以看我的Angular 2.0 从0到1系列第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节:Angular 2.0 从0到1 (五)第六节:Angular 2.0 从0到1 (六)第七节:Angular 2.0 从0到1 (七)第八节:Angular 2.0 从0到1 (八)番外:Angular 2.0 从0到1…

We will learn how to normalize the state shape to ensure data consistency that is important in real-world applications. We currently represent the todos in the state free as an array of todo object. However, in the real app, we probably have more tha…