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

相关推荐
JanelSirry12 小时前
MySQL分区表(PARTITION):水平分表示例 (基于用户ID哈希分表)不依赖第三方中间件
mysql·中间件·哈希算法
虚行4 天前
Mysql 数据同步中间件 对比
数据库·mysql·中间件
康谋自动驾驶4 天前
ROS 传感器模块的通用架构设计与跨中间件扩展实践
中间件
奥尔特星云大使4 天前
mysql读写分离中间件Atlas安装部署及使用
数据库·mysql·中间件·读写分离·atlas
聊聊MES那点事4 天前
Cogent DataHub vs Kepware,两大工业数据中间件的深度对比分析
开发语言·中间件·opc·opc ua
千鼎数字孪生-可视化4 天前
智能制造中的中间件作用:融通设备、系统和云平台
中间件·制造·智能制造
千汇数据的老司机4 天前
边缘存储+中间件协同策略:实现设备数据高效处理与低延迟响应
中间件
jc06205 天前
4.4-中间件之gRPC
c++·中间件·rpc
thginWalker6 天前
中间件常用组件的原理和设计
中间件
奥尔特星云大使7 天前
mysql读写分离中间件——Atlas详解
数据库·mysql·中间件·dba·读写分离