第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已经统一帮我们处理了

相关推荐
lingggggaaaa10 小时前
小迪安全v2023学习笔记(八十讲)—— 中间件安全&WPS分析&Weblogic&Jenkins&Jetty&CVE
笔记·学习·安全·web安全·网络安全·中间件·wps
MySGDLife13 小时前
中间件八股
中间件
Mr_hwt_12319 小时前
基于MyCat 中间件实现mysql集群读写分离与从库负载均衡教程(详细案例教程)
数据库·mysql·中间件·mysql集群
echoyu.1 天前
消息队列-初识kafka
java·分布式·后端·spring cloud·中间件·架构·kafka
Ray Song2 天前
【FastDDS】XML profiles
xml·中间件·自动驾驶·dds·fastdds
lingggggaaaa2 天前
小迪安全v2023学习笔记(七十九讲)—— 中间件安全&IIS&Apache&Tomcat&Nginx&CVE
笔记·学习·安全·web安全·网络安全·中间件·apache
利白3 天前
iceoryx高性能进程间通信中间件,在Windows环境的编译教程
中间件·内存·进程通信·ipc·iceoryx
小红帽2.03 天前
GOFLY开源客服系统-处理gin框架下的session中间件
中间件·gin
Ray Song3 天前
MCAP :机器人数据容器的全面实践指南
中间件·自动驾驶·dds·mcap
Ray Song4 天前
【FastDDS】Layer Transport ( 05-Shared Memory Transport)
中间件·自动驾驶·dds·fastdds