Next Redux中如何在Slice内实现动作的嵌套调用？

你的代码存在核心问题：Redux Slice的reducers必须是纯同步函数，不能包含异步逻辑、也不能直接调用其他action或使用dispatch。要实现你需要的流程，得用Redux Toolkit的createAsyncThunk处理异步请求，再配合自定义thunk串联整个逻辑。

以下是完整实现方案：

1. 重构Slice代码 #

'use client'

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import { getCookie } from '@/app/untils/Cookies';

// 异步请求用户数据的thunk
export const fetchUserData = createAsyncThunk(
  'userData/fetchUserData',
  async (token) => {
    try {
      // 替换为实际的服务器请求逻辑
      const response = await fetch('/api/user', {
        headers: token ? { Authorization: `Bearer ${token}` } : {}
      });
      if (!response.ok) throw new Error('请求失败');
      return await response.json();
    } catch (error) {
      // 无token或请求失败时返回null
      return null;
    }
  }
);

// 检查token并触发数据请求的自定义thunk
export const checkUserToken = () => (dispatch) => {
  const token = getCookie('user-token');
  dispatch(fetchUserData(token || false));
};

const initialState = {
  userData: null,
  loading: false,
  error: null
};

export const userSlice = createSlice({
  name: "userData",
  initialState,
  reducers: {
    // 保留手动更新用户数据的入口（可选）
    setUserData: (state, action) => {
      state.userData = action.payload;
    }
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchUserData.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(fetchUserData.fulfilled, (state, action) => {
        state.loading = false;
        // 直接更新userData，也可调用setUserData reducer
        state.userData = action.payload;
      })
      .addCase(fetchUserData.rejected, (state, action) => {
        state.loading = false;
        state.error = action.error.message;
        state.userData = null;
      });
  }
});

export const { setUserData } = userSlice.actions;
export default userSlice.reducer;

2. 页面加载时触发逻辑 #

在根组件（比如layout.tsx或page.tsx）中，用useDispatch和useEffect启动授权流程：

'use client'

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { checkUserToken } from '@/store/userSlice';

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

  useEffect(() => {
    // 页面加载时自动触发检查token和请求用户数据
    dispatch(checkUserToken());
  }, [dispatch]);

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

关键说明 #

• createAsyncThunk：专门处理异步操作，自动生成pending/fulfilled/rejected三种状态的action，在extraReducers中监听这些状态来更新store。
• 自定义thunk checkUserToken：负责检查Cookie中的token，然后触发异步请求，实现流程的串联。
• 纯函数约束：Slice的reducers仅负责同步更新state，所有异步逻辑和action调度都放在thunk中完成。

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