Next.js中Axios+Redux初始化用户状态失败，代码为何不生效？

为什么你的代码不生效？ #

1. 初始状态不能是异步函数调用：initialState: UserData() 中，UserData 是异步函数，调用后返回的是 Promise 对象，而 Redux 的初始状态必须是同步的原始值（如对象、null 等），无法直接使用 Promise。
2. 异步函数写法错误：你的 UserData 函数中，await 和 .then() 混用且没有返回请求结果，实际返回的是 Promise<undefined>，导致初始状态异常。

正确实现步骤 #

1. 用 Redux Toolkit 的 createAsyncThunk 定义异步请求

将获取用户数据的逻辑封装为异步 thunk，统一处理请求状态：

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from 'axios';

// 定义异步 thunk，用于获取用户数据
export const fetchUserData = createAsyncThunk(
  'user_data/fetchUserData',
  async () => {
    // 直接用 await 获取结果，避免 then/await 混用
    const response = await axios.get(
      'http://localhost:5000/api/auth/getdata',
      { withCredentials: true }
    );
    return response.data;
  }
);

const userSlice = createSlice({
  name: 'user_data',
  // 初始状态设为同步的默认值，包含数据、加载状态、错误信息
  initialState: {
    data: null,
    loading: false,
    error: null
  },
  reducers: {
    // 这里可以添加其他同步操作的 reducer
  },
  // 处理异步 thunk 的三种状态：pending/fulfilled/rejected
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserData.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchUserData.fulfilled, (state, action) => {
        state.loading = false;
        state.data = action.payload; // 将请求结果存入 state
      })
      .addCase(fetchUserData.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message || '获取用户数据失败';
      });
  }
});

export default userSlice.reducer;

2. 在 Next.js 全局组件中触发异步请求

要实现进入任意页面或刷新时自动获取数据，需在全局客户端组件中挂载时触发 thunk：

如果你用 Pages Router（_app.js）：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchUserData } from '../slices/userSlice';

function MyApp({ Component, pageProps }) {
  const dispatch = useDispatch();

  // 组件挂载时 dispatch 异步 thunk
  useEffect(() => {
    dispatch(fetchUserData());
  }, [dispatch]);

  return <Component {...pageProps} />;
}

export default MyApp;

如果你用 App Router（layout.js）：

需要添加 'use client' 声明为客户端组件：

'use client';

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { fetchUserData } from './slices/userSlice';

export default function RootLayout({ children }) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchUserData());
  }, [dispatch]);

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

注意事项 #

• 确保后端接口允许跨域凭证（设置 Access-Control-Allow-Credentials: true），否则 withCredentials: true 会失效。
• 可以根据业务需求在请求失败时添加重试逻辑，或者在 UI 上展示错误提示。
• 如果需要服务器端渲染场景下获取用户数据，可以在 getServerSideProps 中请求数据，再通过组件 props 同步到 Redux。

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