Reducer

Reducer是用于改变数据的函数

  1. 一个数据仓库，有且仅有一个reducer，并且通常情况下，一个工程只有一个仓库，因此，一个系统，只有一个reducer
  2. 为了方便管理，通常会将reducer放到单独的文件中。

image.png

  1. reducer被调用的时机
    1. 通过store.dispatch，分发了一个action，此时，会调用reducer
    2. 当创建一个store的时候，会调用一次reducer
      1. 可以利用这一点，用reducer初始化状态
      2. 创建仓库时，不传递任何默认状态
      3. 将reducer的参数state设置一个默认值
  2. reducer内部通常使用switch来判断type值 ```json import * as usersActions from ‘../action/usersAction’ import { v1 as uuid } from ‘uuid’ const initState = [{ id: uuid(), name: ‘蓝瞳’ }, { id: uuid(), name: ‘蓝火’ }]

export default function users(state = initState, { type, payload }) { console.log(‘==>’, state); console.log(‘==>’, payload); switch (type) { case usersActions.ADDUSER: return […state, payload] case usersActions.DELETEUSER: return state.filter(it => it.id !== payload) case usersActions.UPDATEUSER: return state.map(item => item.id === payload.id ? { …item, …payload } : item) default: return state; } }

  2. 5. **reducer必须是一个没有副作用的纯函数** 
  3.    1. 为什么需要纯函数 
  4.       1. 纯函数有利于测试和调式
  5.       1. 有利于还原数据
  6.       1. 有利于将来和react结合时的优化
  7.    2. 具体要求 
  8.       1. 不能改变参数，因此若要让状态变化，必须得到一个新的状态
  9.       1. 不能有异步
  10.       1. 不能对外部环境造成影响
  11. 6. 由于在大中型项目中，操作比较复杂，数据结构也比较复杂，因此，需要对reducer进行细分。 
  13. ![image.png](https://cdn.nlark.com/yuque/0/2022/png/22357012/1649857672626-1327080d-0f34-4ca9-9154-7d09e65a9769.png#clientId=u76f107db-789a-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=666&id=ubf837d53&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1332&originWidth=1804&originalType=binary&ratio=1&rotation=0&showTitle=false&size=243215&status=done&style=none&taskId=uea119a4c-b1e7-446f-88cc-210b43e172a&title=&width=902)
  14. ```json
  15. import loginUserReducer from './loginUser'
  16. import usersReducer from './users'
  18. function reducer(state = {}, action) {
  19.     return {
  20.         loginUser: loginUserReducer(state.loginUser, action),
  21.         users: usersReducer(state.users, action)
  22.     }
  23. }
  25. export default reducer
  1. import * as loginUserActions from '../action/loginUserAction'
  3. const initialState = null;
  5. export default (state = initialState, { type, payload }) => {
  6.     switch (type) {
  7.         case loginUserActions.LOGINUSER:
  8.             return payload;
  9.         default:
  10.             return state
  11.     }
  12. }
  1. import * as  usersActions from '../action/usersAction'
  2. import { v1 as uuid } from 'uuid'
  3. const initState = [{
  4.     id: uuid(),
  5.     name: '蓝瞳'
  6. }, {
  7.     id: uuid(),
  8.     name: '蓝火'
  9. }]
  12. export default function users(state = initState, { type, payload }) {
  13.     console.log('==>', state);
  14.     console.log('==>', payload);
  15.     switch (type) {
  16.         case usersActions.ADDUSER:
  17.             return [...state, payload]
  18.         case usersActions.DELETEUSER:
  19.             return state.filter(it => it.id !== payload)
  20.         case usersActions.UPDATEUSER:
  21.             return state.map(item => item.id === payload.id ? { ...item, ...payload } : item)
  22.         default:
  23.             return state;
  24.     }
  25. }
  1. redux提供了方法，可以帮助我们更加方便的合并reducer
  2. combineReducers: 合并reducer，得到一个新的reducer，该新的reducer管理一个对象，该对象中的每一个属性交给对应的reducer管理。 ```json import loginUserReducer from ‘./loginUser’ import usersReducer from ‘./users’ import { combineReducers } from ‘redux’

// function reducer(state = {}, action) { // return { // loginUser: loginUserReducer(state.loginUser, action), // users: usersReducer(state.users, action) // } // }

// export default reducer

export default combineReducers({ loginUserReducer, usersReducer }) `` combineReducers`方法和手动封装的reducer函数,原理完全一致