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

相关推荐
重生之后端学习12 小时前
day08-Elasticsearch
后端·elasticsearch·spring cloud·中间件·全文检索·jenkins
云资源服务商16 小时前
探秘阿里云消息队列:解锁分布式系统的异步通信奥秘
阿里云·中间件·云计算
伍哥的传说3 天前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
失败又激情的man4 天前
Scrapy进阶封装(第四阶段:中间件设置,动态UA,ip代理池)
爬虫·scrapy·中间件
亲爱的非洲野猪4 天前
Kafka消息积压的多维度解决方案:超越简单扩容的完整策略
java·分布式·中间件·kafka
摘星编程5 天前
深入理解责任链模式:从HTTP中间件到异常处理的实战应用
http·设计模式·中间件·责任链模式·实战应用
~山有木兮6 天前
LiteHub中间件之限流实现
网络·http·中间件
fo安方7 天前
运维的利器–监控–zabbix–第三步:配置zabbix–中间件–Tomcat–步骤+验证
运维·中间件·zabbix
Code季风7 天前
Gin 中间件详解与实践
学习·中间件·golang·go·gin
一只程序汪8 天前
【如何实现分布式压测中间件】
分布式·中间件