欧卡乐网站建设,湖南微信网站,个人主页介绍文案,logo设计大赛网站一、为什么redux中要使用不可变数据
Redux 要求使用不可变数据#xff0c;是因为它遵循了函数式编程的原则。在函数式编程中#xff0c;数据不可变是一项重要的原则#xff0c;这有助于避免状态更改产生的不可预知的副作用。
在 Redux 中#xff0c;每当 action 被分发是因为它遵循了函数式编程的原则。在函数式编程中数据不可变是一项重要的原则这有助于避免状态更改产生的不可预知的副作用。
在 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 reduximport immerMiddleware from ./plugin/immerMiddleware
import rootReducer from ./reducersconst store createStore(rootReducer, applyMiddleware(immerMiddleware))当我们在修改数据的时候就不需要再考虑不可变数据的问题了因为immer已经统一帮我们处理了
