react18中使用redux管理公共数据仓库实现数据immutable更新

Immutable.js出自Facebook，是最流行的不可变数据布局的实现之一。它实现了完全的持久化数据布局，使用布局共享。所有的更新操作都会返回新的值，但是在内部布局是共享的，来减少内存占用。Immutablejs官网
  在上一篇介绍redux的文章，我们可以看到在创建的reducer中举行数据更改的时候，会使用…来复制状态数据，为的就是不对原数据举行直接修改，只做替换，就是为了实现react的数据不可变immutable。也就是说假如state的数据比力简单那还好，万一比力复杂，就要复制很多这样的布局数据，很占内存影响app的性能。

安装

1. npm i immutable redux-immutable -S

复制代码

替换redux中的combineReducers，改用redux-immutable里面的

1. import { createStore } from "redux";
2. import { combineReducers } from "redux-immutable";
4. import { CounterReducer } from "./CounterReducer";
6. const reducers = combineReducers({
7.   count: CounterReducer,
8. });
10. let store = createStore(reducers);
12. store.subscribe(() => console.log(store.getState()));
14. export default store;

复制代码

改造reducers里面的代码
[code]import { fromJS } from "immutable";
const initialState = fromJS({
  counter: 0,
  userInfo: {
    name: "John Doe",
    age: 25,
  },
});
function CounterReducer(state = initialState, action) {
  switch (action.type) {
    case "ADD":
      return state.update("counter", (val) => {
        console.log("