如何创建调用所有其他Redux Reducer时自动运行的快照Reducer？

不用给每个reducer手动加caseReducers.createSnapshot，有三种更高效的方式：

1. 用高阶Reducer统一包裹 #

写一个高阶函数，把快照逻辑封装进去，一次性给所有原有reducer加上快照处理，不用逐个修改：

// 封装高阶reducer，自动追加快照逻辑
const withSnapshot = (originalReducer, snapshotTarget) => {
  return (state, action) => {
    // 先执行原reducer的状态变更逻辑
    const updatedState = originalReducer(state, action);
    // 调用快照处理函数，返回最终状态
    return caseReducers.createSnapshot(updatedState, action, snapshotTarget);
  };
};

// 批量处理所有reducer
const wrappedReducers = {
  userInfo: withSnapshot(userInfoReducer, { path: 'profile' }),
  settings: withSnapshot(settingsReducer, { path: 'preferences' }),
  // ... 剩下的30多个reducer都这么套一遍
};

// 创建切片时直接用包裹后的reducers
const yourSlice = createSlice({
  name: 'yourSlice',
  initialState,
  caseReducers: wrappedReducers,
});

2. 利用extraReducers监听切片所有action #

如果只要当前切片的状态有变更就触发快照，不管是哪个reducer触发的，可以在extraReducers里监听该切片的所有action，统一执行快照逻辑：

const yourSlice = createSlice({
  name: 'yourSlice',
  initialState,
  caseReducers: {
    // 原来的30多个reducer，完全不用修改
    updateUser: (state, action) => { /* ... */ },
    changeSetting: (state, action) => { /* ... */ },
    // ...
  },
  extraReducers: (builder) => {
    // 匹配当前切片的所有action
    builder.addMatcher(
      action => action.type.startsWith(`${yourSlice.name}/`),
      (state, action) => {
        // 直接在当前状态上执行快照处理
        caseReducers.createSnapshot(state, action);
      }
    );
  },
});

3. 自定义Redux中间件（全局场景） #

如果多个切片都需要类似的快照逻辑，或者需要在全局层面处理，写一个中间件，在action处理完成后触发快照：

const snapshotMiddleware = store => next => action => {
  // 先让action正常执行，更新状态
  const actionResult = next(action);
  
  // 只处理目标切片的action
  if (action.type.startsWith('yourSlice/')) {
    const currentSliceState = store.getState().yourSlice;
    // 执行快照存储逻辑
    caseReducers.createSnapshot(currentSliceState, action);
  }
  
  return actionResult;
};

// 创建store时注入中间件
const store = configureStore({
  reducer: {
    yourSlice: yourSlice.reducer,
    // ...其他切片
  },
  middleware: getDefaultMiddleware => getDefaultMiddleware().concat(snapshotMiddleware),
});

注意点 #

• 确保createSnapshot是纯函数，符合Redux reducer的规范，不要在里面做异步操作或副作用。
• 如果只需要对切片中的特定部分做快照，在调用时精准传入目标路径，避免不必要的状态更新。

内容的提问来源于stack exchange，提问作者Eric P