使用next-redux-wrapper时Next.js服务端Redux状态与客户端不同步如何解决

你代码的问题出在counterSlice对HYDRATE动作的处理逻辑错误：

• next-redux-wrapper触发的HYDRATE动作的payload是服务端生成的完整Redux根状态树，不是单个counter切片的状态。你直接把全量根状态和当前counter切片的状态合并，无法正确拿到服务端计算后的count值。
  按照你现有代码的逻辑，合并后的counter切片状态会变成{count: 0, counter: {count: 3}}，所以你读取state.counter.count时拿到的还是初始值0。

修改store.ts中counterSlice的extraReducers配置，正确提取根状态里的counter切片数据：

export const counterSlice = createSlice({
    name: 'counter',
    initialState: { count: 0 },
    reducers: {
        add: (state, action) => {
            state.count += action.payload;
        },
        deleter: (state, action) => {
            state.count -= action.payload;
        },
    },
    extraReducers: {
        [HYDRATE]: (state, action) => {
            // 从全量服务端状态中取出counter模块的状态，和现有状态合并
            return {
                ...state,
                ...action.payload.counter
            };
        },
    },
});

如果修改后仍有问题，可检查以下配置：

• 确认_app.tsx的导出方式为export default wrapper.withRedux(MyApp)，不要自行额外注入store
• 打开控制台查看HYDRATE日志的action.payload.counter.count是否为3，若为3说明服务端dispatch逻辑正常，问题仅出在客户端状态同步环节

内容的提问来源于stack exchange，提问作者홍우지