珠峰培训，专注前端

一、从一个计数器开始

1.1 用 class 声明一个计数器

  1. import React, { Component } from 'react'
  2. import ReactDOM from 'react-dom'
  4. import Computed from './Computed'
  6. class Counter extends Component {
  7.     constructor (props, context) {
  8.         super()
  10.         this.state = {
  11.             num: 0
  12.         }
  13.     }
  15.   render () {
  16.     return (<div className="container">
  17.         <button onClick={() => this.setState({num: this.state.num + 1})}>+</button>
  18.         <span>{this.state.num}</span>
  19.         <button onClick={() => this.setState({num: this.state.num - 1})}>-</button>
  20.         <Computed num={this.state.num} />
  21.     </div>)
  22.   }
  23. }
  25. ReactDOM.render(<Counter />, document.getElementById('root'))

1.2 声明一个计算当前计数器的数据是奇数还是偶数的 Computed 组件

  1. import React, { Component } from 'react'
  3. export default class Computed extends Component {
  4.   render () {
  5.     return (<div>
  6.         <h2>{this.props.num % 2 === 0 ? '偶数' : '奇数'}</h2>
  7.     </div>)
  8.   }
  9. }

父子组件来回传，而且兄弟组件无能为力，所以我们需要使用 redux 全局托管数据

二、使用 redux

redux 是一种数据管理模式，它不仅可以用于 react 还可以配合其他库或者框架使用；我们把整个应用的状态交给 redux 托管，redux 会导出一个 store，其中包含获取状态的方法，以及变更状态的方法

2.1 安装 redux

  1. yarn add redux --save

2.2 创建 store

2.2.1. 创建 store 需要使用 redux 的 createStore 方法，使用前需要导入：

  1. import { createStore } from 'redux'

2.2.2. createStore 创建 store 需要 reducer函数

使用 redux 我们不能直接修改状态，我们需要定义修改状态的函数，这个函数称为 reducer

reducer 函数都会接收两个参数

  • state 就是当前 redux 托管的数据对象，在创建 reducer 时给 state 设置的默认值就是 state 的初始值
  • action 是修改状态具体的动作以及修改状态需要的参数，是一个带有 type 字段的对象 { type: ‘ADD’, …payload } ，而 reducer 的作用就是根据不同的 action.type 返回一个新的状态对象

在定义 reducer 时，我们需要初始化需要交给 redux 托管的状态设置初始值；在创建reducer时给 state 设置的默认值就是 state 的初始值

  • 示例：
  1. function reducer(state = { num: 0 }, action) {
  2.     // state 就是当前 redux 托管的数据对象，在创建 reducer 时给 state 设置的默认值就是 state 的初始值
  3.     // action 是修改状态具体的动作以及修改状态需要的参数，是一个带有 type 字段的对象 { type: 'ADD', ...payload } ，而 reducer 的作用就是根据不同的 action.type 返回一个新的状态对象
  5.     switch (action.type) {
  6.         case 'ADD':
  7.             return {
  8.                 num: state.num + action.amount
  9.             }
  11.         case 'MINUS':
  12.             return {
  13.                 num: state.num - action.amount
  14.             }
  15.     }
  17.     // 使用 reducer 首先需要返回一个默认状态
  18.     return state
  19. }

2.2.3. 创建一个 store 的完整示例：

  1. import { createStore } from 'redux'
  3. // 使用 redux 我们不能直接修改状态，我们需要定义修改状态的函数，这个函数称为 reducer
  4. // 一个用来管理状态的函数
  5. function reducer(state = { num: 0 }, action) {
  6.     // state 就是当前 redux 托管的数据对象，在创建 reducer 时给 state 设置的默认值就是 state 的初始值
  7.     // action 是修改状态具体的动作以及修改状态需要的参数，是一个带有 type 字段的对象 { type: 'ADD', ...payload } ，而 reducer 的作用就是根据不同的 action.type 返回一个新的状态对象
  9.     switch (action.type) {
  10.         case 'ADD':
  11.             return {
  12.                 num: state.num + action.amount
  13.             }
  15.         case 'MINUS':
  16.             return {
  17.                 num: state.num - action.amount
  18.             }
  19.     }
  21.     // 使用 reducer 首先需要返回一个默认状态
  22.     return state
  23. }
  25. // 创建 store，只需要把 reducer 传递给 createStore
  26. let store = createStore(reducer)
  28. export default store

2.3 在组件中导入 store

有了 store，你可以：

  • store.getState() 初始化 state
  • 当修改数据时需要 派发行动 dispatch action； store.dispatch({type: ‘ADD’, amount: 12})，dispatch 执行时传递的对象就是 action，action 对象会传递给 reducer 函数的第二个参数
  • 如果需要数据修改后更新视图，需要订阅这个数据发生变化后的事件，如果想修改视图就更新 state，在组件挂载的钩子中订阅
  • 订阅后会有取消订阅的需要，订阅函数会返回取消订阅的函数，在组件将要销毁的钩子中执行取消订阅的操作

2.3.1 导入

  1. import store from '../store'

2.3.2 使用 store.getState() 初始化 state

  1. ....
  2. constructor (props, context) {
  3.     super()
  5.     this.state = {
  6.         num: store.getState().num
  7.     }
  8. }
  9. ....

2.3.3 store.dispatch(actionObj) 修改状态

  1. <button onClick={() => store.dispatch({type: 'ADD', amount: 1})}>+</button>

2.3.4 store.subscribe(callback) store 订阅状态更新后执行的回调，以便更新视图

  1. componentDidMount () {
  2.     // 订阅状态变化后做的事情
  3.     this.unsub = store.subscribe(() => {
  4.         this.setState({
  5.             num: store.getState().num
  6.         })
  7.     })
  8. }
  10. componentWillUnmount () {
  11.     // 组件销毁时取消订阅
  12.     this.unsub()
  13. }

2.4 使用 redux 后的 Counter.js

  1. import React, { Component } from 'react'
  2. import ReactDOM from 'react-dom'
  4. import Computed from './Computed'
  6. import store from '../store'
  8. window.__store = store
  10. class Counter extends Component {
  11.     constructor (props, context) {
  12.         super()
  14.         this.state = {
  15.             num: store.getState().num
  16.         }
  17.     }
  19.     componentDidMount () {
  20.         // 订阅状态变化后做的事情
  21.         this.unsub = store.subscribe(() => {
  22.             this.setState({
  23.                 num: store.getState().num
  24.             })
  25.         })
  26.     }
  28.     componentWillUnmount () {
  29.         this.unsub()
  30.     }
  32.   render () {
  33.     return (<div className="container">
  34.         <button onClick={() => store.dispatch({type: 'ADD', amount: 1})}>+</button>
  35.         <span>{this.state.num}</span>
  36.         <button onClick={() => store.dispatch({type: 'MINUS', amount: 1})}>-</button>
  37.         <Computed num={this.state.num} />
  38.     </div>)
  39.   }
  40. }
  42. ReactDOM.render(<Counter />, document.getElementById('root'))

2.5 使用 redux 后的 Computed.js

  1. import React, { Component } from 'react'
  3. import store from '../store'
  5. export default class Computed extends Component {
  6.     constructor (props, context) {
  7.         super()
  8.         this.state = {
  9.             num: store.getState().num
  10.         }
  11.     }
  13.     componentDidMount () {
  14.         this.unsub = store.subscribe(() => {
  15.             this.setState({
  16.                 num: store.getState().num
  17.             })
  18.         })
  19.     }
  21.     componentWillUnmount () {
  22.         this.unsub()
  23.     }
  25.   render () {
  26.     return (<div>
  27.         <h2>{this.state.num % 2 === 0 ? '偶数' : '奇数'}</h2>
  28.     </div>)
  29.   }
  30. }

三、提取 action 的 type

把 action 的 type 提取出来，作为宏

  1. let ADD = 'ADD'
  2. let MINUS = 'MINUS'

对应修改 store 和 Counter.js

四、reducer 合并

  • 现在有两个拥有独立功能的组件：Counter.js 和 Todo.js
  • redux 是一个单一的状态树，整个应用内所有的数据都要保存到一个 store 中，所以如果多个组件的状态，那么就会有多个 reducer，而 createStore 只能接收一个 reducer，此时就需要使用 reducer 合并
  • redux 中的 combineReducers 是用来整合状态的方法，它接收一个对象作为参数，会把多个 reducer 整合到一个中。
    整合后返回一个新的 reducer ，我们在创建 store 的时候传入这个整合后的 reducer；
  • 同时状态也被整合，例如上面的 counter 和 todo 整合后的状态对象： { todo: {list: [], filter}, counter: {num: 0}}

4.1 整合后示例

  1. import { createStore, combineReducers } from 'redux'
  3. // 把 action 的 type 提取出来，作为宏
  4. let ADD = 'ADD'
  5. let MINUS = 'MINUS'
  7. // 使用 redux 我们不能直接修改状态，我们需要定义修改状态的函数，这个函数称为 reducer
  8. // 一个用来管理状态的函数
  9. function counter(state = { num: 0 }, action) {
  10.     // state 就是当前 redux 托管的数据对象，在创建reducer时给 state 设置的默认值就是 state 的初始值
  11.     // action 是修改状态具体的动作以及修改状态需要的参数，是一个带有 type 字段的对象 { type: 'ADD', ...payload } ，而 reducer 的作用就是根据不同的 action.type 返回一个新的状态对象
  13.     switch (action.type) {
  14.         case ADD:
  15.             return {
  16.                 num: state.num + action.amount
  17.             }
  19.         case MINUS:
  20.             return {
  21.                 num: state.num - action.amount
  22.             }
  23.     }
  25.     // 使用 reducer 首先需要返回一个默认状态
  26.     return state
  27. }
  29. let todoState = {
  30.     list: [],
  31.     filter: 'all'
  32. }
  35. function todo(state = todoState, action) {
  36.     switch (action.type) {
  37.         case 'ADD_TODO':
  38.             return {
  39.                 ...state,
  40.                 list: [ // 这个 list 会覆盖上面 ... 出来的 list
  41.                     ...state.list,
  42.                     action.content
  43.                 ]
  44.             }
  45.     }
  46.     return state
  47. }
  49. // combineReducers 是用来整合状态的方法，它接收一个对象作为参数，会把多个 reducer 整合到一个中
  50. // 整合后的 返回一个新的 reducer ，同时 状态也被整合，例如上面的 counter 和 todo 整合后的状态对象： { todo: {list: [], filter}, counter: {num: 0}}
  52. let combinedReducer = combineReducers({
  53.     todo: todo,
  54.     counter: counter
  55. })
  57. let store = createStore(combinedReducer)
  59. export default store

4.2 使用整合后的 store

整合后的 store 带有命名空间，在组件中使用的时候需要通过对应的命名空间获取状态；

4.2.1 Counter.js

  1. import React, { Component } from 'react'
  2. import ReactDOM from 'react-dom'
  4. import Computed from './Computed'
  5. import Todo from './Todo'
  7. import store from '../store'
  9. // 把 action 的 type 提取出来，作为宏
  10. let ADD = 'ADD'
  11. let MINUS = 'MINUS'
  14. window.__store = store
  16. class Counter extends Component {
  17.     constructor (props, context) {
  18.         super()
  20.         this.state = {
  21.             num: store.getState().counter.num
  22.         }
  23.     }
  25.     componentDidMount () {
  26.         // 订阅状态变化后做的事情
  27.         this.unsub = store.subscribe(() => {
  28.             this.setState({
  29.                 num: store.getState().counter.num
  30.             })
  31.         })
  32.     }
  34.     componentWillUnmount () {
  35.         this.unsub()
  36.     }
  38.   render () {
  39.     return (<div className="container">
  40.         <button onClick={() => store.dispatch({type: ADD, amount: 1})}>+</button>
  41.         <span>{this.state.num}</span>
  42.         <button onClick={() => store.dispatch({type: MINUS, amount: 1})}>-</button>
  43.         <Computed />
  44.         <Todo />
  45.     </div>)
  46.   }
  47. }
  49. ReactDOM.render(<Counter />, document.getElementById('root'))

4.2.2 Computed.js

  1. import React, { Component } from 'react'
  3. import store from '../store'
  5. export default class Computed extends Component {
  6.     constructor (props, context) {
  7.         super()
  8.         this.state = {
  9.             num: store.getState().counter.num
  10.         }
  11.     }
  13.     componentDidMount () {
  14.         this.unsub = store.subscribe(() => {
  15.             this.setState({
  16.                 num: store.getState().counter.num
  17.             })
  18.         })
  19.     }
  21.     componentWillUnmount () {
  22.         this.unsub()
  23.     }
  25.   render () {
  26.     return (<div>
  27.         <h2>{this.state.num % 2 === 0 ? '偶数' : '奇数'}</h2>
  28.     </div>)
  29.   }
  30. }

4.2.3 Todo.js

  1. import React, { Component } from 'react'
  3. import store from '../store'
  5. export default class Todo extends Component {
  6.     constructor (props, context) {
  7.         super()
  9.         this.state = {
  10.             todos: store.getState().todo
  11.         }
  12.     }
  13.     componentDidMount () {
  14.         store.subscribe(() => {
  15.             this.setState({
  16.                 todos: store.getState().todo
  17.             })
  18.         })
  19.     }
  20.   render () {
  21.     return (<div className="container">
  22.         <p><input type="text" onKeyDown={(e) => {
  23.           if (e.keyCode === 13) {
  24.               store.dispatch({
  25.                   type: 'ADD_TODO',
  26.                   content: e.target.value
  27.               })
  28.               e.target.value = ''
  29.           }
  30.         }
  31.         }/></p>
  32.         <ul>
  33.             {
  34.                 this.state.todos.list.map((item, index) => <li key={index}>{item}</li>)
  35.             }
  36.         </ul>
  37.     </div>)
  38.   }
  39. }

五、actionCreator 动作创建器

写一个函数专门生成 dispatch 需要的 action 对象，这个函数称为 action-creator

示例：

  1. import * as Types from '../action-type'
  3. function add(amount) {
  4.     return {
  5.         type: Types.ADD,
  6.         amount
  7.     }
  8. }
  10. function minus(amount) {
  11.     return {
  12.         type: Types.MINUS,
  13.         amount
  14.     }
  15. }
  • 有了 action-creator 以后，在 dispatch 时只需要调用 action-creator 并且传入 payload 即可；
  • 示例：
  1. // add 和 minus 就是 action-creator，而 1 是传递给 上面的 amount，即 payload
  2. <button onClick={() => store.dispatch(add(1))}>+</button>
  3. <span>{this.state.num}</span>
  4. <button onClick={() => store.dispatch(minus(1))}>-</button>

六、文件拆分

React 的模块化特性很强，对应着 redux 的使用也需要拆分成模块化达到代码解耦的目的，上例中的 store 我们拆分文件后的结构如下；

6.1 文件结构

  1. store
  2.     │  index.js 导出 store
  3.     │
  4.     ├─action action-creator
  5.     │      counter.js
  6.     │      todo.js
  7.     │
  8.     ├─action-type action 定义
  9.     │      index.js
  10.     │
  11.     └─reducer 存放 reducer
  12.             counter.js
  13.             todo.js

/store/index.js

  1. import {createStore, combineReducers} from 'redux'
  3. import { counter } from './reducer/counter'
  4. import { todo } from './reducer/todo'
  6. let combinedReducer = combineReducers({
  7.     todo: todo,
  8.     counter: counter
  9. })
  11. let store = createStore(combinedReducer)
  13. export default store

store/action/counter.js

  1. import * as Types from '../action-type'
  3. function add(amount) {
  4.     return {
  5.         type: Types.ADD,
  6.         amount
  7.     }
  8. }
  10. function minus(amount) {
  11.     return {
  12.         type: Types.MINUS,
  13.         amount
  14.     }
  15. }
  17. export { add, minus }

store/action/todo.js

  1. import * as Types from '../action-type'
  3. function addTodo(content) {
  4.     return {
  5.         type: Types.ADD_TODO,
  6.         content
  7.     }
  8. }
  10. export { addTodo }

store/action-types/index

  1. export const ADD = 'ADD'
  2. export const MINUS = 'MINUS'
  4. export const ADD_TODO = 'ADD_TODO'

store/reducer/counter

  1. import * as Types from '../action-type'
  2. export function counter(state = {num: 0}, action) {
  3.     switch (action.type) {
  4.         case Types.ADD:
  5.             return {
  6.                 num: state.num + action.amount
  7.             }
  9.         case Types.MINUS:
  10.             return {
  11.                 num: state.num - action.amount
  12.             }
  13.     }
  15.     // 使用 reducer 首先需要返回一个默认状态
  16.     return state
  17. }

/store/reducer/todo.js

  1. import * as Types from '../action-type'
  3. let todoState = {
  4.     list: [],
  5.     filter: 'all'
  6. }
  9. export function todo(state = todoState, action) {
  10.     switch (action.type) {
  11.         case Types.ADD_TODO:
  12.             return {
  13.                 ...state,
  14.                 list: [ // 这个 list 会覆盖上面 ... 出来的 list
  15.                     ...state.list,
  16.                     action.content
  17.                 ]
  19.             }
  20.     }
  21.     return state
  22. }

七、react-redux

上面虽然实现了数据的统一管理，但是代码组织很繁琐，为了解决这个问题我们使用一个另一个工具，react-redux；

7.1 安装 react-redux

  1. yarn add react-redux --save

7.2 react-redux 的 Provider

react-redux 提供了一个 Provider 组件，通过 Provider 组件将 store 引入到组件树中，可以简化在组件里初始化状态，修改组件需要派发事件，然后还需要订阅更新；

  • 使用 Provider 在主入口 index.js 引入 store，通过 prop 把 store 作为属性，传给 Provider 组件

7.3 react-redux 的 connect 方法

react-redux 提供了一个 connect 方法；通过 connect 改造组件，经过 connect 改造，组件中的数据以及派发数据的方法全部通过 props 来实现；

7.4 示例：

7.4.1 src/index.js

  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  3. import './index.css';
  5. import { Provider } from 'react-redux'
  7. import store from './store'
  9. import Counter from './components/Counter'
  12. ReactDOM.render(<Provider store={store}>
  13.     <Counter />
  14. </Provider>, document.getElementById('root'))

7.4.2 使用 connect 导出一个连接后的组件

  • 7.3.2.1 使用 connect 首先从 react-redux 导出 connect；
  1. import { connect } from 'react-redux'
  • 7.3.2.2 使用 connect 导出的是连接后的组件，connect 可以执行两次：

connect 是一个高阶函数，形如let connect = > (m1, m2) => (component) => {}

  • 第一次执行传入两个回调函数：
    • mapStateToProps 把 store 的状态映射成为组件的 props
    • mapDispatchToProps 把 dispatch 映射为 prop
  • 第二次执行，传入组件名 Counter

使用 connect 后，对应组件内的使用数据和修改数据的方式也需要调整，方法和数据都要从 prop 上获取

  • Counter.js 示例：
  1. import React, { Component } from 'react'
  2. import ReactDOM from 'react-dom'
  4. import Computed from './Computed'
  5. import Todo from './Todo'
  7. import { add, minus} from '../store/action/counter'
  9. import { connect } from 'react-redux'
  11. // 使用 react-redux 需要导出一个连接后的组件
  13. class Counter extends Component {
  14.   render () {
  15.     return (<div className="container">
  16.         <button onClick={() => this.props.add(1)}>+</button>
  17.         <span>{this.props.num}</span>
  18.         <button onClick={() => this.props.minus(1)}>-</button>
  19.         <Computed />
  20.         <Todo />
  21.     </div>)
  22.   }
  23. }
  25. // react-redux 的 connect 方法接收两个参数，let connect = > (m1, m2) => (component) => {}
  26. // 第一次执行传入两个回调函数：
  27. // 1. mapStateToProps 把 store 的状态映射称为组件的 props
  28. // 2. mapDispatchToProps 把 dispatch 映射为 prop
  30. // 第二次执行，传入组件名 Counter
  32. let mapStateToProps = (state) => {
  33.     // mapStateToProps 的参数 state 就是合并后的状态对象
  34.     // 在 mapStateToProps 函数中要返回一个对象，这些对象中是数据都会成为对应组件的 props
  35.     return {
  36.         num: state.counter.num
  37.     }
  38. }
  40. let mapDispatchToProps = (dispatch) => {
  41.     // mapDispatchToProps 的参数是 dispatch 就是派发行为的 store.dispatch 方法
  42.     // mapDispatchToProps 需要返回一个对象，这个对象中
  44.     return {
  45.         add: (amount) => dispatch(add(amount)),
  46.         minus: (amount) => dispatch(minus(amount))
  47.     }
  48. }
  50. export default connect(mapStateToProps, mapDispatchToProps)(Counter)

7.5 mapStateToProps 和 mapDispatchToProps 有简便写法

  • mapStateToProps 可以写成一个 箭头函数，在箭头函数中使用 … 运算符展开某个状态对象
  • mapDispatchToProps 可以传入一个 actionCreator 对象，示例
  1. export default connect(state => ({...state.counter}), {add, minus})(Counter)

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】