React项目Redux-Toolkit报错：无法初始化前访问authReducer

一、错误修复：Uncaught ReferenceError: Cannot access 'authReducer' before initialization #

问题根源 #

出现这个错误是因为循环引用：authSlice.ts导入了store.ts中的RootState，而store.ts又导入了authSlice.ts中的authReducer，导致模块初始化顺序混乱。此外，store.ts中authReducer的导入路径存在错误，进一步加剧了加载问题。

修复步骤 #

1. 修正导入路径：store.ts中authReducer的导入路径应改为相对当前文件的路径（假设store.ts在store目录下）：

   import { authReducer } from './auth/authSlice';
   

2. 规范Reducer键名：在store.ts的reducer配置中，使用简洁的键名（如auth、cart）替代authReducer、cartReducer，这是Redux-Toolkit的标准写法：

   const store = configureStore({
     reducer: {
       auth: authReducer,
       cart: cartReducer,
     },
   });
   

3. 调整订阅逻辑：对应修改store.subscribe中的状态访问路径：

   store.subscribe(() => {
     const state = store.getState();
     if (state.auth.isAuthenticated) {
       localStorage.setItem('token', state.auth.token as string);
       localStorage.setItem('refreshToken', state.auth.refreshToken as string);
     }
   });
   

4. 解决循环引用：如果authSlice.ts中需要获取全局状态，在createAsyncThunk中通过thunkAPI.getState()获取，而非直接导入RootState：

   export const refreshUserToken = createAsyncThunk(
     'auth/refresh',
     async (_, thunkAPI) => {
       // 获取全局状态并断言类型
       const state = thunkAPI.getState() as RootState;
       const refreshTokenVal = state.auth.refreshToken;
       if (!refreshTokenVal) {
         thunkAPI.dispatch(logout());
         return;
       }
       try {
         const response = await refreshToken(refreshTokenVal);
         return response.data;
       } catch (error: unknown) {
         return thunkAPI.rejectWithValue(error.response.data);
       }
     }
   );
   

二、Redux-Toolkit中跨Reducer状态管理 #

1. 跨Reducer读取状态 #

在异步逻辑（如createAsyncThunk）中，通过thunkAPI.getState()获取全局状态，进而访问其他Reducer的状态，示例见上文refreshUserToken的实现。

2. 跨Reducer更新状态 #

禁止直接在一个Reducer中修改另一个Reducer的状态，应通过触发目标Reducer的Action实现联动。例如，登录成功后清空购物车：

• 先在cartSlice.ts中添加清空购物车的Action：

  const cartSlice = createSlice({
    name: "cart",
    initialState: { cart: [] } as CartState,
    reducers: {
      // ...其他reducer
      clearCart: (state) => {
        state.cart = [];
      },
    },
  });
  export const { clearCart } = cartSlice.actions;
  

• 使用Redux-Toolkit的createListenerMiddleware监听登录成功事件，触发清空购物车：

  // store.ts
  import { configureStore, createListenerMiddleware } from "@reduxjs/toolkit";
  import { cartReducer, clearCart } from "./cart/cartSlice";
  import { authReducer, userLogin } from './auth/authSlice';
  
  const listenerMiddleware = createListenerMiddleware();
  
  listenerMiddleware.startListening({
    actionCreator: userLogin.fulfilled,
    effect: async (action, listenerApi) => {
      listenerApi.dispatch(clearCart());
    },
  });
  
  const store = configureStore({
    reducer: {
      auth: authReducer,
      cart: cartReducer,
    },
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware().prepend(listenerMiddleware.middleware),
  });
  

三、authReducer和cartReducer的组件使用示例 #

1. 读取状态（useSelector） #

import { useSelector } from 'react-redux';
import { RootState } from '../store';

// 获取认证状态
const { isAuthenticated, loading, error } = useSelector((state: RootState) => state.auth);

// 获取购物车状态及计算总价
const cartItems = useSelector((state: RootState) => state.cart.cart);
const cartTotal = cartItems.reduce((total, item) => total + (item.quantity || 1) * item.price, 0);

2. 触发Action（useDispatch） #

import { useDispatch } from 'react-redux';
import { AppDispatch } from '../store';
import { addToCart, increaseQuantity } from '../store/cart/cartSlice';
import { userLogin, logout } from '../store/auth/authSlice';

const dispatch = useDispatch<AppDispatch>();

// 登录操作
const handleLogin = () => {
  dispatch(userLogin({ email: 'test@example.com', password: '123456', name: '' }));
};

// 添加商品到购物车
const handleAddToCart = (product) => {
  dispatch(addToCart(product));
};

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