Redux Toolkit异步逻辑实现与循环依赖错误排查求助

需求与问题 #

我正在学习Redux Toolkit，想要实现以下逻辑：应用启动时执行check()函数，通过getCredentials获取已保存的凭证；若凭证存在则调用login接口登录，不存在则显示登录界面（isAuthenticated为false时显示）。

但目前出现了循环依赖错误，导致代码无法正常运行：

Require cycle: state\reducers\authSlice.ts -> state\store.ts -> state\reducers\authSlice.ts

Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.        
 ERROR  TypeError: undefined is not an object (evaluating '_authSlice.default.reducer')

注释掉store.dispatch后代码可正常运行，现有代码如下：

store.tsx #

import { configureStore } from "@reduxjs/toolkit";
import authSlice from "./reducers/authSlice";

export const store = configureStore({
    reducer: {
        auth: authSlice.reducer
    }
});

export async function getStore(){
    return store;
}

setImmediate(()=>{
    store.dispatch(authSlice.actions.check());
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

authSlice.tsx #

import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit'
import { store } from '../store';
import { isAuthenticated, login } from '../../api/auth';
import { getCredentials, saveCredentials } from '../../storage/auth';
import { Credentials } from '../../interfaces/auth';

interface AuthState {
    isAuthenticated?: boolean
    username?: string
}

const initialState: AuthState = {
    isAuthenticated: undefined,
    username: undefined
}

const authSlice = createSlice({
    name: "auth",
    initialState,
    reducers: {
        check(state){
            if (state.isAuthenticated == undefined){
                getCredentials().then(auth=>{
                    if (auth){
                        login(auth).then(()=>{
                            store.dispatch(authSlice.actions.loginSuccess(auth))
                        })
                    } else {
                        store.dispatch(authSlice.actions.unauthenticated())
                    }
                })
            }
        },
        loginSuccess(state,action: PayloadAction<Credentials>){
            state.username = action.payload.username;
            state.isAuthenticated = true;
        },
        unauthenticated(state){
            state.isAuthenticated = false;
        },
    },
});

export default authSlice;

有人指出在reducer中调用store.dispatch是反模式，请教如何正确实现该业务逻辑？

正确实现方案 #

问题核心在于两点：一是store和authSlice之间的循环依赖，二是在reducer中执行异步操作、调用dispatch的反模式（reducer必须是纯函数，不能包含副作用）。以下是修正后的实现：

1. 用createAsyncThunk处理异步逻辑 #

将check的异步逻辑抽离为Redux Toolkit提供的异步thunk，thunk可以直接获取dispatch，无需导入store。

修改authSlice.tsx：

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit'
import { login } from '../../api/auth';
import { getCredentials } from '../../storage/auth';
import { Credentials } from '../../interfaces/auth';

interface AuthState {
    isAuthenticated?: boolean
    username?: string
}

const initialState: AuthState = {
    isAuthenticated: undefined,
    username: undefined
}

// 定义异步thunk处理登录检查
export const checkAuth = createAsyncThunk(
    'auth/check',
    async (_, { dispatch }) => {
        const auth = await getCredentials();
        if (auth) {
            await login(auth);
            dispatch(loginSuccess(auth));
        } else {
            dispatch(unauthenticated());
        }
    }
);

const authSlice = createSlice({
    name: "auth",
    initialState,
    reducers: {
        loginSuccess(state, action: PayloadAction<Credentials>) {
            state.username = action.payload.username;
            state.isAuthenticated = true;
        },
        unauthenticated(state) {
            state.isAuthenticated = false;
        },
    },
});

// 导出actions和reducer
export const { loginSuccess, unauthenticated } = authSlice.actions;
export default authSlice.reducer;

2. 修正store.tsx，消除循环依赖 #

现在authSlice不再导入store，直接导出reducer和thunk，store中对应调整：

import { configureStore } from "@reduxjs/toolkit";
import authReducer, { checkAuth } from "./reducers/authSlice";

export const store = configureStore({
    reducer: {
        auth: authReducer
    }
});

export async function getStore(){
    return store;
}

// 启动时触发登录检查
setImmediate(() => {
    store.dispatch(checkAuth());
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

方案优势 #

• 彻底消除循环依赖：authSlice不再直接导入store，通过thunk参数获取dispatch
• 遵循Redux最佳实践：reducer保持纯函数，异步逻辑统一放在thunk中处理
• 逻辑分离更清晰：异步操作与状态更新解耦，代码更易维护和测试

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