3.2 Redux TodoApp
上一节讲完了 redux 中的概念,但是仍然没有和 react 联系起来,这一节
将利用 redux 在 react 中实现完整的 todolist:
在 react 使用 redux
通过 Provider 连接 react 和 redux store
创建 action creators
创建 reducer
创建 Container Component
床架 Dummy Component
3.2.1 在 react 使用 redux
redux 可以和很多第三方的框架结合起来使用,为了在 react 中使用 redux,可以通过 react-redux
安装 react-redux
$ npm install --save react-redux
3.2.2 通过 Provider 连接 react 和 redux store
react-redux 提供了一个叫 Provider 的组件,将 react 和 react-redux 结合的方式是用 Provider 嵌套应用的 App 组件,并将 redux store 作为属性传递到 Provider 组件之中。
index.js
import React from 'react' import { render } from 'react-dom' import { Provider } from 'react-redux' import { createStore } from 'redux' import todoApp from './reducers' import App from './components/App' /** store 数据结构 sample { visibilityFilter: 'SHOW_ALL',todos: [ { text: 'Consider using Redux',completed: true,},{ text: 'Keep all state in a single tree',completed: false } ] } */ let store = createStore(todoApp) render( <Provider store={store}> <App /> </Provider>,document.getElementById('root') )
这里使用到了 React 的 Context ,App 下面的所有组件可以利用 context 获取传入到 Provider 中的 store
3.2.3 创建 action creators
actions/index.js
let nextTodoId = 0 export const addTodo = (text) => { return { type: 'ADD_TODO',id: nextTodoId++,text } } export const setVisibilityFilter = (filter) => { return { type: 'SET_VISIBILITY_FILTER',filter } } export const toggleTodo = (id) => { return { type: 'TOGGLE_TODO',id } }
3.2.4 创建 reducer
首先创建根 reducer,通过 redux.combineReducers
方法将其他 reducer 结合起来,每个数据 key 都需要实现一个对应的 reducer
reducer/index.js
import { combineReducers } from 'redux' import todos from './todos' import visibilityFilter from './visibilityFilter' const todoApp = combineReducers({ todos,visibilityFilter }) export default todoApp
接着是 todos reducer,需要注意的地方是其中使用 Object.assign 方法保证每次都是返回新的
对象
reducer/todos.js
const todo = (state,action) => { switch (action.type) { case 'ADD_TODO': return { id: action.id,text: action.text,completed: false } case 'TOGGLE_TODO': if (state.id !== action.id) { return state } return Object.assign({},state,{ completed: !state.completed }) default: return state } } const todos = (state = [],action) => { switch (action.type) { case 'ADD_TODO': return [ ...state,todo(undefined,action) ] case 'TOGGLE_TODO': return state.map(t => todo(t,action) ) default: return state } } export default todos
最后是 visibilityFilter
reducers/visibibityFilter.js
const visibilityFilter = (state = 'SHOW_ALL',action) => { switch (action.type) { case 'SET_VISIBILITY_FILTER': return action.filter default: return state } } export default visibilityFilter
3.2.5 Container Component
在介绍 flux 的时候介绍过组件分两个类型,smart component 和 dummy component,在 redux 中 Container Component 就是 smart component
作用
在 react 应用中,store 的数据只有 container component 能知晓,container component 会将知晓的数据传递给 dummy components ,除此之外 action 的触发方法也会由它传递给 dummy components
connect 方法
react-redux 提供了一个叫 connect 的方法,可以将一个组件变为 container component
const ContainerComponent = connect( /** * 方法将 store 作为参数,返回有个 {key: Value} 对象,key 作为属性传递给 DummyComponent * @type {[type]} */ mapStateToProps: Function,/** * 方法传递 store.dispatch 作为参数,返回一个{key: Function} 对象,key 作为属性传递给 DummyComponent * @type {[type]} */ mapDispatchToProps: Function )(DummyComponent)
创建 todolist 的 container component
todolist 会分为三个 container,有个负责 todolist,一个负责 filter,一个为添加 todo,首先是 todolist。
containers/VisibleTodoList.js
import { connect } from 'react-redux' import { toggleTodo } from '../actions' import TodoList from '../components/TodoList' const getVisibleTodos = (todos,filter) => { switch (filter) { case 'SHOW_ALL': return todos case 'SHOW_COMPLETED': return todos.filter(t => t.completed) case 'SHOW_ACTIVE': return todos.filter(t => !t.completed) } } const mapStateToProps = (state) => { return { todos: getVisibleTodos(state.todos,state.visibilityFilter) } } const mapDispatchToProps = (dispatch) => { return { onTodoClick: (id) => { dispatch(toggleTodo(id)) } } } const VisibleTodoList = connect( mapStateToProps,mapDispatchToProps )(TodoList) export default VisibleTodoList
containers/FilterLink.js
import { connect } from 'react-redux' import { setVisibilityFilter } from '../actions' import Link from '../components/Link' const mapStateToProps = (state,ownProps) => { return { active: ownProps.filter === state.visibilityFilter } } const mapDispatchToProps = (dispatch,ownProps) => { return { onClick: () => { dispatch(setVisibilityFilter(ownProps.filter)) } } } const FilterLink = connect( mapStateToProps,mapDispatchToProps )(Link) export default FilterLink
containers/AddTodo.js
import React from 'react' import { connect } from 'react-redux' import { addTodo } from '../actions' let AddTodo = ({ dispatch }) => { let input return ( <div> <form onSubmit={e => { e.preventDefault() if (!input.value.trim()) { return } dispatch(addTodo(input.value)) input.value = '' }}> <input ref={node => { input = node }} /> <button type="submit"> Add Todo </button> </form> </div> ) } AddTodo = connect()(AddTodo) export default AddTodo
3.2.6 负者展现的 Dummy Components
components/App.js: App.js 连接所有的 Container Components
import React from 'react' import Footer from './Footer' import AddTodo from '../containers/AddTodo' import VisibleTodoList from '../containers/VisibleTodoList' const App = () => ( <div> <AddTodo /> <VisibleTodoList /> <Footer /> </div> ) export default App
components/TodoList.js: 展现 todos 列表
import React,{ PropTypes } from 'react' import Todo from './Todo' const TodoList = ({ todos,onTodoClick }) => ( <ul> {todos.map(todo => <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} /> )} </ul> ) TodoList.propTypes = { todos: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.number.isrequired,completed: PropTypes.bool.isrequired,text: PropTypes.string.isrequired }).isrequired).isrequired,onTodoClick: PropTypes.func.isrequired } export default TodoList
components/Todo.js
import React,{ PropTypes } from 'react' const Todo = ({ onClick,completed,text }) => ( <li onClick={onClick} style={{ textDecoration: completed ? 'line-through' : 'none' }} > {text} </li> ) Todo.propTypes = { onClick: PropTypes.func.isrequired,text: PropTypes.string.isrequired } export default Todo
components/Link.js
import React,{ PropTypes } from 'react' const Link = ({ active,children,onClick }) => { if (active) { return <span>{children}</span> } return ( <a href="#" onClick={e => { e.preventDefault() onClick() }} > {children} </a> ) } Link.propTypes = { active: PropTypes.bool.isrequired,children: PropTypes.node.isrequired,onClick: PropTypes.func.isrequired } export default Link
components/Footer.js
import React from 'react' import FilterLink from '../containers/FilterLink' const Footer = () => ( <p> Show: {" "} <FilterLink filter="SHOW_ALL"> All </FilterLink> {","} <FilterLink filter="SHOW_ACTIVE"> Active </FilterLink> {","} <FilterLink filter="SHOW_COMPLETED"> Completed </FilterLink> </p> ) export default Footer