如何在Next.js 13的getServerSideProps中调用Redux Toolkit的asyncThunk

1. 适配next-redux-wrapper版本 #

Next.js 13 Pages Router（你用了getServerSideProps）必须搭配8.x版本的next-redux-wrapper，旧版本（如7.x）和Next.js 13存在兼容性问题，会直接导致服务端的dispatch不生效。

2. 检查Store与Wrapper配置 #

确保makeStore函数正确生成Store实例，且createWrapper配置无误：

// store.js 示例
import { configureStore } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';
import yourSlice from './slices/yourSlice';

const makeStore = () => configureStore({
  reducer: {
    yourSlice: yourSlice.reducer,
  },
  devTools: process.env.NODE_ENV !== 'production',
});

// 开启debug可查看服务端日志，帮助定位问题
export const wrapper = createWrapper(makeStore, { debug: false });

3. 修正getServerSideProps写法 #

核心错误通常是未await异步thunk，导致服务端逻辑在action执行完成前就结束，看起来像action没被调用。正确写法：

// 页面组件中的getServerSideProps
export const getServerSideProps = wrapper.getServerSideProps(async (context) => {
  // 必须await异步thunk的执行
  await context.store.dispatch(fetchYourData());
  return { props: {} };
});

4. 验证Thunk Action本身 #

在thunk内部添加console.log，查看终端（服务器端日志，不是浏览器控制台）是否有输出，确认action是否被触发：

// slice中的AsyncThunk示例
export const fetchYourData = createAsyncThunk(
  'yourSlice/fetchData',
  async (_, { rejectWithValue }) => {
    console.log('服务端触发了thunk'); // 终端查看此日志
    try {
      const res = await fetch('你的API地址');
      if (!res.ok) throw new Error('请求失败');
      return await res.json();
    } catch (err) {
      return rejectWithValue(err.message);
    }
  }
);

5. 确认页面组件被Wrapper包裹 #

页面组件必须通过wrapper.withRedux包裹，否则服务端与客户端的Store无法共享：

// 页面组件
import { wrapper } from '../store';

const YourPage = () => {
  // 组件逻辑
};

export default wrapper.withRedux(YourPage);

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