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

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

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

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

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

二、在redux中使用immer

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、例子

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文件

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

2、使用

import { createStore, applyMiddleware } from 'redux'import immerMiddleware from './plugin/immerMiddleware'
import rootReducer from './reducers'const store = createStore(rootReducer, applyMiddleware(immerMiddleware))

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