一步一步创建 React_Redux 应用指南.pdf

React/Redux /@rajaraodv/step-by-step-guide-to-building-react-redux-apps-using-mocks- 48ca0f47f9a#.xrl0339vm Redux React React-Redux Reducer Action Action Creator StateMiddleware Redux “React Redux ” React- Redux React Redux “mocks” Todo list app 为创应础应值 这过 为为 Redux React - JS Action Redux - React stateAction Redux React State Action Redux BTW Todo Todo React Redux Todo 1 - Mock 2 - “” AddTodo TodoList Filter Redux Action State 1. DOM State 2. JS Action 3 - state action state action AddTodo TodoList Filter Action State 3.1 AddTodo Todo ”ADD_TODO” 3.2 TodoList TodoList Todo Todos Filter Todo VisibilityFilter Todo TOGGLE_TODO 3.3 Filter Filter CurrentFilter Filter SET_VISIBILITY_FILTER Redux Action Creator Action Creator DOM JSON “Action” Action/ dispatch 4 - Action Action Creator 3 Action ADD_TODO TOGGLE_TODO SET_VISIBILITY_FILTER action Action Creator 1 //1. Takes the text from AddTodo field and returns proper Action JSON to send to other components. 2 export const addTodo = (text) = { 3 return { 4 type: ‘ADD_TODO’, 5 id: nextTodoId++, 6 text, //--ES6. same as text:text, in ES5 7 completed: false //-- initially this is set to false 8 } 9 } 10 11 //2. Takes filter string and returns proper Action JSON object to send to other compon ents. 12 export const setVisibilityFilter = (filter) = { 13 return { 14 type: ‘SET_VISIBILITY_FILTER’, 15 filter 16 } 17 } 18 19 //3. Takes Todo item’s id and returns proper Action JSON object to send to other compo nents. 20 export const toggleTodo = (id) = { 21 return { 22 type: ‘TOGGLE_TODO’, 23 id 24 } 25 } Redux