第46节——redux中使用不可变数据+封装immer中间件——了解

一、为什么redux中要使用不可变数据

Redux 要求使用不可变数据，是因为它遵循了函数式编程的原则。在函数式编程中，数据不可变是一项重要的原则，这有助于避免状态更改产生的不可预知的副作用。

在 Redux 中，每当 action 被分发，reducer 都会接收到当前的状态和 action，并返回一个新的状态。如果使用的是可变数据类型，并且在 reducer 中直接对状态进行修改，就会造成状态的不可预知的更改。

因此，Redux 要求使用不可变数据，是为了更好地管理应用状态，以及提高代码的可读性和可维护性

二、在redux中使用immer

jsx 复制代码

import produce from "immer";
const defaultState = {
  name: "张三",
};

const userReducer = (state = defaultState, action) => {
  console.log(action);
  switch (action.type) {
    case "UPDATE_USER_NAME":
      return produce(state, (draft) => {
        draft.name = action.name;
      });
    default:
      return state;
  }
};

export default userReducer;

四、applyMiddleware

1、概念

applyMiddleware 是 Redux 的一个高阶函数，用于向 Redux Store 应用中间件。

中间件是一个函数，它可以在 dispatch 操作执行前后，对 action 进行拦截、处理、修改等操作。例如：日志记录、错误捕获、异步请求、数据缓存等等。

使用 applyMiddleware，你可以实现额外的功能，并且可以在不修改原始代码的情况下对其进行扩展。

2、例子

jsx 复制代码

import { createStore, applyMiddleware } from 'redux'
// 日志插件
import logger from 'redux-logger'
import rootReducer from './reducers'

// 直接使用日志插件
const store = createStore(rootReducer, applyMiddleware(logger))

五、进阶------使用immer封装一个redux的中间件，让所有的修改数据都是以不可变数据的方式进行修改

1、创建一个immerMiddleware.js文件

jsx 复制代码

import { produce } from 'immer';

// 定义immerMiddleware中间件

/**
 * 
 * store createStore后返回的store，可以使用他的任何方法
 * next 
 * @returns 
 */
const immerMiddleware = store => next => action => {
  // 使用immer的produce函数生成新的state
  const newState = produce(store.getState(), draft => {
    /**
     * next可以调用对应的action里面的reducer
     * 并且可以拿到reducer返回的结果
     * 我们把返回的结果给draft赋值
     */
    draft = next(action);
  });

  // 返回新的state
  return newState;
};

export default immerMiddleware;

2、使用

jsx 复制代码

import { createStore, applyMiddleware } from 'redux'

import immerMiddleware from './plugin/immerMiddleware'
import rootReducer from './reducers'

const store = createStore(rootReducer, applyMiddleware(immerMiddleware))

当我们在修改数据的时候就不需要再考虑不可变数据的问题了，因为immer已经统一帮我们处理了