在 Redux Toolkit 中使用多个切片时，如何监听全局动作并直接更新 rootState？ 概念概述输入动作修改Reducer

问题描述

我的 Redux 商店中有一个状态如下：

type RootState = {
 PAGE_A: StatePageA,PAGE_B: StatePageB,PAGE_C: StatePageC,// AND SO ON...
}

每个页面都是使用 createSlice 中的 @reduxjs/toolkit 创建的切片

我正在使用 Next.js 静态生成和 SSR，因此我需要使用来自 Next.js 服务器后续页面的新状态来补充我之前创建的存储。

无论我要路由到哪个页面，我都会得到预渲染的 pageState，它的类型应该是 StatePageA | StatePageB | StatePageC。

当新状态出现时，我需要dispatch()一个HYDRATE_PAGE操作，它应该替换当前页面状态。

这是我关于如何处理 HYDRATE_PAGE 操作的第一个想法。

export const HYDRATE_PAGE = createAction<{
  pageName: "PAGE_A" | "PAGE_B" | "PAGE_C",pageState: StatePageA | StatePageB | StatePageC
}>("HYDRATE_PAGE");

然后我将不得不在每个切片中聆听它：

// EX: PAGE_A SLICE
// THIS WOULD HAVE TO BE DONE FOR EACH SLICE ON THE extraReducers PROPERTY

extraReducers: {
  [HYDRATE_PAGE]: (state,action) => {
    if (action.payload.pageName === "PAGE_A")
      return action.payload.pageState
  }
}

有没有一种方法可以集中处理它，而不必在每个 slice reducer 中监听那个动作？

例如：rootReducer 类型的事情，我可以在其中监听 HYDRATE_PAGE 操作并在一个地方处理它。

// THIS REDUCER WOULD HAVE ACCESS TO THE rootState
(state: RootState,action) => {
  const {pageName,pageState} = action.payload;
  state[pageName] = pageState;
};

这有可能吗？

---

额外

有一个名为 next-redux-wrapper 的包，但我不打算使用它。我正在尝试构建我的自定义解决方案。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）