1. 抽离 dispatch公共方法
    1. 让更新的过程，可以被描述 {type, payload}
  2. 抽离 action方法
    1. dispatch({type: 'add', payload: data})

dispatch

dispatch接管事件，统一派发动作 action
全局拦截和 debugger

  1. import React, { useState, useCallback, useEffect } from 'react'
  2. const TODO_KEY = '_TODO_'
  4. function TodoList() {
  5.   const [data, setData] = useState([])
  7.   // 让更新的过程，可以被描述 {type: '', payload}
  8.   const dispatch = useCallback((action) => {
  9.     const {type, payload} = action
  10.     switch (type) {
  11.       case 'set':
  12.         return setData(payload)
  14.       case 'add':
  15.         return setData(state => [payload, ...state])
  17.       case 'remove':
  18.         return setData(state =>
  19.             state.filter(todo => todo.id !== payload))
  21.       case 'finish':
  22.         return setData(state => state.map(todo =>
  23.             (todo.id === payload) ? { ...todo, finish: !todo.finish } : todo)
  24.       )
  25.       default:
  26.      }
  27.    }, [])
  29.     // componentDidMount
  30.     useEffect(() => {
  31.       const getData = JSON.parse(sessionStorage.getItem(TODO_KEY) || '[]')
  32.       dispatch({type: 'set', payload: getData})
  33.     }, [])
  35.     // componentDidUpdate
  36.     useEffect(() => {
  37.       sessionStorage.setItem(TODO_KEY, JSON.stringify(data))
  38.     }, [data])
  39.   }

action

函数统一了，就需要用参数来区分：

  1. 优化 action，用工厂函数创建 action
  2. 引入 actionCreator概念，用 dispatch派发 action ```javascript export function createSet(payload) { return { type: ‘set’, payload } }

export function createAdd(payload) { return { type: ‘add’, payload } }

  1. 页面使用 action
  2. ```jsx
  3. import React, { useState, useCallback, useEffect } from 'react'
  4. import {
  5.   createSet,
  6.   createAdd,
  7.   createFinish,
  8.   createRemove
  9. } from './action'
  11. const TODO_KEY = '_TODO_'
  13. function TodoList() {
  14.   const [data, setData] = useState([])
  16.   // 需要传递的函数，用 useCallback包裹起来
  17.   const dispatch = useCallback((action) => {
  18.     const {type, payload} = action
  19.     switch (type) {
  20.       case 'set':
  21.         return setData(payload)
  23.       case 'add':
  24.         return setData(state => [payload, ...state])
  26.       case 'remove':
  27.         return setData(state =>
  28.         state.filter(todo => todo.id !== payload))
  30.       case 'finish':
  31.         return setData(state => state.map(todo =>
  32.         (todo.id === payload) ? { ...todo, finish: !todo.finish } : todo)
  33.         )
  34.       default:
  35.     }
  36.   }, [])
  38.   // componentDidMount
  39.   useEffect(() => {
  40.     const getData = JSON.parse(sessionStorage.getItem(TODO_KEY) || '[]')
  41.     dispatch(createSet(getData))
  42.     // before
  43.     // dispatch({type: 'set', payload: getData})
  44.   }, [])
  46.   return (
  47.     <section>
  48.       <InputItem dispatch={dispatch} />
  49.       <ListItem
  50.         dispatch={dispatch}
  51.         data={data}
  52.         />
  53.     </section>
  54.   )
  55. }
  57. // child
  58. function TodoItem({ data, dispatch }) {
  60.   const onChange = useCallback(function (id) {
  61.     dispatch(createFinish(id))
  62.     // before
  63.     // dispatch({ type: 'finish', payload: id })
  64.   }, [])
  66.   const onRemove = useCallback(function (id) {
  67.     dispatch(createRemove(id))
  68.     // before
  69.     // dispatch({ type: 'remove', payload: id })
  70.   }, [])
  72.   return (
  73.     <ul>
  74.       {
  75.         data.map(item => {
  76.           const { id, finish, value } = item || {}
  77.           return (
  78.             <li key={id} className={finish ? 'finish' : ''}>
  79.               <input
  80.                 type="checkbox"
  81.                 checked={finish}
  82.                 onChange={() => onChange(id)}
  83.                 />
  84.               <label>{value}</label>
  85.               <button onClick={() => onRemove(id)}>×</button>
  86.             </li>
  87.           )
  88.         })
  89.       }
  90.     </ul>
  91.   )
  92. }

bindActionCreators

再次优化 dispatch函数，把 creatorAction直接传递给 dispatch
期望的封装的方法

  1. 接收 payload的参数
  2. 返回带 action的 dispatch函数，省略额外的 dispatch ```jsx const addTodo = (payload) => dispatch(createAdd(payload)) const removeTodo = (payload) => dispatch(createRemove(payload))

// 可能有很多个，就用到 bindActionCreators.js const actionCreators = { addTodo: addTodo, removeTodo: removeTodo, }

  2. bindActionCreators.js
  3. ```jsx
  4. /**
  5.  * @param {Object} actionCreators 
  6.  * @param {Function} dispatch 
  7.  * @return {Object}
  8.  */
  9. function bindActionCreators(actionCreators, dispatch) {
  10.   const proxy = {}
  11.   const keysArray = Object.keys(actionCreators)
  13.   for(const key of keysArray) {
  14.     proxy[key] = (...args) => {
  15.       const actionCreator = actionCreators[key]
  16.       const action = actionCreator(...args)
  17.       dispatch(action)
  18.       // dispatch({type: 'add', payload: []})
  19.     }
  20.   }
  21.   return proxy
  22. }
  24. export default bindActionCreators

组件调用

  1. bindActionCreators({ addTodo: createAdd }, dispatch)
  1. import React, { useState, useCallback, useEffect } from 'react'
  2. import {
  3.   createSet,
  4.   createAdd,
  5.   createFinish,
  6.   createRemove
  7. } from './action'
  8. import bindActionCreators from './bindActionCreators'
  10. const TODO_KEY = '_TODO_'
  12. function TodoList() {
  13.   const [data, setData] = useState([])
  15.   // 让更新的过程，可以被描述 {type: '', payload}
  16.   const dispatch = useCallback((action) => {
  17.     const {type, payload} = action
  18.     switch (type) {
  19.       case 'set':
  20.         return setData(payload)
  22.       case 'add':
  23.         return setData(state => [payload, ...state])
  25.       case 'remove':
  26.         return setData(state =>
  27.         state.filter(todo => todo.id !== payload))
  29.       case 'finish':
  30.         return setData(state => state.map(todo =>
  31.         (todo.id === payload) ? { ...todo, finish: !todo.finish } : todo)
  32.         )
  33.       default:
  34.     }
  35.   }, [])
  37.   // componentDidMount
  38.   useEffect(() => {
  39.     const getData = JSON.parse(sessionStorage.getItem(TODO_KEY) || '[]')
  40.     dispatch(createSet(getData))
  41.     // before
  42.     // dispatch({type: 'set', payload: getData})
  43.   }, [])
  45.   return (
  46.     <section>
  47.       <InputItem
  48.         {...bindActionCreators({ addTodo: createAdd }, dispatch)}
  49.         // before dispatch={dispatch}
  50.       />
  51.       <ListItem
  52.         {
  53.           ...bindActionCreators({
  54.             onRemove: createRemove,
  55.             onFinish: createFinish,
  56.           }, dispatch)
  57.         }
  58.         // before dispatch={dispatch}
  59.         data={data}
  60.       />
  61.     </section>
  62.   )
  63. }
  65. // child
  66. function TodoItem({ data, onRemove, onFinish }) {
  67.   return (
  68.     <ul>
  69.       {
  70.         data.map(item => {
  71.           const { id, finish, value } = item || {}
  72.           return (
  73.             <li key={id} className={finish ? 'finish' : ''}>
  74.               <input
  75.                 type="checkbox"
  76.                 checked={finish}
  77.                 onChange={() => onFinish(id)}
  78.               />
  79.               <label>{value}</label>
  80.               <button onClick={() => onRemove(id)}>×</button>
  81.             </li>
  82.           )
  83.         })
  84.       }
  85.     </ul>
  86.   )
  87. }

reducer

更新数据，以数据的维度来更新；
以 action的维度只能针对一种业务
reducer拆分数据，以数据维度，来更新数据，返回更新后的数据

  1. /**
  2.  * @param {*} state 初始化的所有数据
  3.  * @param {*} action {type, payload}
  4.  * @return 返回更新后的数据
  5.  */
  6. function reducer(state = {}, action) {
  7.   const { type, payload } = action
  8.   const { data, value } = state
  10.   switch(type) {
  11.     case 'set':
  12.       return {
  13.         ...state,
  14.         data: payload,
  15.         value: value + 3
  16.       }
  18.     case 'add':
  19.       return {
  20.         ...state,
  21.         data: [payload, ...data],
  22.         value: value + 10
  23.       }
  25.     case 'remove':
  26.       const newData = data.filter(todo => todo.id !== payload)
  27.       return {
  28.         ...state,
  29.         data: newData
  30.       }
  32.     case 'finish':
  33.       return {
  34.         ...state,
  35.         data: data.map(todo =>
  36.         (todo.id === payload) ? { ...todo, finish: !todo.finish } : todo)
  37.       }
  38.   }
  39.   return state
  40. }
  41. export default reducer

以上的 reducer方法混合个各种数据的更新，引起了副作用，
让每个字段独立的有自己的 reducer来更新数据，类似于

  1. const reducers = {
  2.   data(state = {}, action) {
  3.     const { type, payload } = action
  4.     const { data } = state
  6.     switch(type) {
  7.       case 'set':
  8.         return {
  9.           ...state,
  10.           data: payload,
  11.           value: value + 3
  12.         }
  14.       case 'add':
  15.         return {
  16.           ...state,
  17.           data: [payload, ...data],
  18.           value: value + 10
  19.         }
  21.       case 'remove':
  22.         const newData = data.filter(todo => todo.id !== payload)
  23.         return {
  24.           ...state,
  25.           data: newData
  26.         }
  28.       case 'finish':
  29.         return {
  30.           ...state,
  31.           data: data.map(todo =>
  32.                          (todo.id === payload) ? { ...todo, finish: !todo.finish } : todo)
  33.         }
  34.     }
  35.     return state
  36.   },
  37.   value(state, action) {
  38.   }
  39. }

combineReducers

  1. function combineReducers(reducers) {
  2.   return (state, action) => {
  3.     const proxy = {}
  4.     const keysArray = Object.keys(reducers)
  6.     for(const key of keysArray) {
  7.       proxy[key] = reducers[key](state[key], action)
  8.     }
  10.     return {
  11.       ...state,
  12.       ...proxy
  13.     }
  14.   }
  15. }
  16. export default combineReducers

多个 reducers

按照数据的维度来拆分，不同的数据之间不会相互影响，
每个函数的 state代表当前的值
缺点：

  1. 不能读取其他数据的值

  2. 默认是同步的，不能异步 ```jsx /**

    • */ const reducers = { data(state = {}, action) { const { type, payload } = action

      switch (type) { case ‘set’: return payload

      case ‘add’: return [payload, …state]

      case ‘remove’: return state.filter(todo => todo.id !== payload)

      case ‘finish’: return state.map(todo =>

      1.  (todo.id === payload) ? { ...todo, finish: !todo.finish } : todo)

      } return state },

    value(state = {}, action) { const { type } = action switch (type) { case ‘set’:

    1.  return state + 3

    case ‘add’:

    1.  return state + 10

    } return state } }

// 接收一个总的 reducer，返回更新后的数据 function combineReducers(reducers) { return (state, action) => { const proxy = {} const keysArray = Object.keys(reducers)

  1. for(const key of keysArray) {
  2.   proxy[key] = reducers[key](state[key], action)
  3. }
  5. return {
  6.   ...state, // 传入的 state，返回修改后的 state
  7.   ...proxy
  8. }

} }

export default combineReducers(reducers)

  4. <a name="4GgWO"></a>
  5. ## 异步Action
  6. redux本身也不能处理异步的逻辑，<br />react-redux插件可以处理 asyncAction
  7. ```jsx
  8. import React, { useState, useRef, useEffect, memo } from 'react'
  10. import {
  11.   createSet,
  12.   createAdd,
  13.   createFinish,
  14.   createRemove
  15. } from './action'
  16. import bindActionCreators from './bindActionCreators'
  17. import reducer from './combineReducers'
  19. const TODO_KEY = '_TODO_'
  21. // 初始化的所有数据
  22. let store = {
  23.   data: [],
  24.   value: 0
  25. }
  27. const ListItem = memo(TodoItem)
  29. function TodoList() {
  30.   const [data, setData] = useState([])
  31.   const [value, setValue] = useState(10)
  33.   useEffect(() => {
  34.     Object.assign(store, { data, value })
  35.   }, [data, value])
  38.   function dispatch(action) {
  39.     const setters = {
  40.       data: setData,
  41.       value: setValue,
  42.     }
  44.     // 异步的逻辑, action默认返回 Object，如果是 Function，说明有异步逻辑
  45.     // 返回最新 state的一个函数，在组件的上下文中，每次渲染周期返回的都不是最新的 state
  46.     // 在全局创建一个 store，存储所有的 state，如何同步呢？useEffect
  47.     if (typeof action === 'function') {
  48.       // 通过函数参数来获取最新的 state，即全局的 store
  49.       return action(dispatch, () => store)
  50.     }
  52.     // 核心的一个代码
  53.     const newState = reducer(store, action)
  55.     for(let key in newState) {
  56.       if (!setters[key]) break;
  57.       setters[key](newState[key])
  58.     }
  59.   }
  61.   // componentDidMount
  62.   useEffect(() => {
  63.     const getData = JSON.parse(sessionStorage.getItem(TODO_KEY) || '[]')
  64.     dispatch(createSet(getData))
  65.   }, [])
  67.   // componentDidUpdate
  68.   useEffect(() => {
  69.     sessionStorage.setItem(TODO_KEY, JSON.stringify(data))
  70.   }, [data])
  72.   return (
  73.     <section>
  74.       <InputItem
  75.         {...bindActionCreators({ addTodo: createAdd }, dispatch)}
  76.       />
  77.       <ListItem
  78.         {
  79.           ...bindActionCreators({
  80.             onRemove: createRemove,
  81.             onFinish: createFinish,
  82.           }, dispatch)
  83.         }
  84.         data={data}
  85.       />
  86.     </section>
  87.   )
  88. }
  90. export default TodoList