问题描述
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 的包,但我不打算使用它。我正在尝试构建我的自定义解决方案。
解决方法
概念概述
我不确定您的商店是否具有最佳设计,因为通常您希望按数据类型而不是在哪个页面上使用数据来组织数据。但我只想回答这里提出的问题。
reducer 只是一个函数,它接受一个状态和一个动作并返回下一个状态。当您使用 combineReducers
(或 configureStore
,在内部使用 combineReducers
)组合切片缩减器的键控对象时,您会得到一个如下所示的函数:
(state: RootState | undefined,action: AnyAction) => RootState
我们希望围绕该函数创建一个包装器,并添加一个额外的步骤来执行 HYDRATE_PAGE
操作。
输入动作
export const HYDRATE_PAGE = createAction<{
pageName: "PAGE_A" | "PAGE_B" | "PAGE_C",pageState: StatePageA | StatePageB | StatePageC
}>("HYDRATE_PAGE");
您的动作创建器中的打字稿类型并不像它们所能达到的那么好,因为我们希望强制 pageName
和 pageState
相互匹配。我们真正想要的类型是这样的:
type HydratePayload = {
[K in keyof RootState]: {
pageName: K;
pageState: RootState[K];
}
}[keyof RootState];
export const HYDRATE_PAGE = createAction<HydratePayload>("HYDRATE_PAGE");
计算结果为有效配对的并集:
type HydratePayload = {
pageName: "PAGE_A";
pageState: StatePageA;
} | {
pageName: "PAGE_B";
pageState: StatePageB;
} | {
pageName: "PAGE_C";
pageState: StatePageC;
}
修改Reducer
首先,我们将使用 rootReducer
创建普通的 combineReducers
。然后我们创建 hydratedReducer
作为它的包装器。我们调用 rootReducer(state,action)
来获取下一个状态。大多数时候我们只是返回那个状态而不做任何事情。
但是,如果 action
与我们的 HYDRATE_PAGE
操作匹配,那么我们通过用我们的有效负载中的状态替换该切片的状态来修改状态。
const rootReducer = combineReducers({
PAGE_A: pageAReducer,PAGE_B: pageBReducer,PAGE_C: pageCReducer
});
const hydratedReducer = (state: RootState | undefined,action: AnyAction): RootState => {
// call the reducer normally
const nextState = rootReducer(state,action);
// modify the next state when the action is hydrate
if (HYDRATE_PAGE.match(action)) {
const { pageName,pageState } = action.payload;
return {
...nextState,[pageName]: pageState
};
}
// otherwise don't do anything
return nextState;
}
const store = configureStore({
reducer: hydratedReducer,});