初始化前无法访问“ authReducer”

问题描述

我将ReferenceError: Cannot access 'authReducer' before initialization与Redux和redux-toolkit结合使用时遇到了错误redux-persist

我有3个减速器，它们与combineReducers中的redux-toolkit合并在一起。然后，我将商店配置为将其中一个化简器持久化到localStorage。当我运行该应用程序时，我看到上面提到的错误消息，它指向authSlice，如果我将其注释掉，则该错误消息消失了，我能够成功运行该应用程序。我的问题是我无法弄清为什么错误特别在authSlice中出现，因为该错误与其他减速器大致相同。

import { configureStore,ThunkAction,Action } from "@reduxjs/toolkit";
import { persistStore,persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { useDispatch } from "react-redux";
import { rootReducer } from "./rootReducer";

const persistConfig = {
  key: "root",storage: storage,whitelist: ["user"],};

const persistedReducer = persistReducer(persistConfig,rootReducer);

export const store = configureStore({
  reducer: persistedReducer,});
export const persistor = persistStore(store);

我的根减少剂

import { combineReducers } from "@reduxjs/toolkit";
import { userReducer } from "redux/user/slice";
import { studentReducer } from "redux/student/slice";
import { authReducer } from "redux/auth/slice";

export const rootReducer = combineReducers({
  user: userReducer,auth: authReducer,student: studentReducer,});

还有可能导致错误的切片

import { AppStateType } from "redux/store";
import { createSlice,createAsyncThunk } from "@reduxjs/toolkit";
import { AxiosError } from "axios";
import instance from "api/axios.config";
import {
  AuthState,LoginParams,ChangePasswordParams,Error,ChangePasswordResponseType,LoginInfoType,} from "./types";
import { history } from "utils/history";
import { NonAuthRoutes } from "routes/routeConfig";
import { userRequest,clearUser } from "redux/user/slice";


export const loginRequest = createAsyncThunk<
  LoginInfoType,{ rejectValue: Error }
>("auth/loginRequest",async (userInfo,{ rejectWithValue,dispatch }) => {
  const { email,password } = userInfo;
  try {
    const {
      data: { id,role,access,refresh,was_password_reset },} = await instance.post("auth/login/",{
      email,password,});

    localStorage.setItem("access_token",access);
    localStorage.setItem("refresh_token",refresh);

    dispatch(userRequest({ role,id }));

    return {
      id,was_password_reset,};
  } catch (err) {
    let error: AxiosError = err;
    if (error.response?.status === 400) {
      return rejectWithValue({
        message: "Incorrect login or password",});
    }
    throw err;
  }
});


const initialState: AuthState = {
  loading: false,error: null,loginInfo: null,isLoggedIn: false,};

const authSlice = createSlice({
  name: "auth",initialState,reducers: {
    clearAsyncError: (state) => {
      state.error = null;
    },},extraReducers: (builder) => {
    builder.addCase(loginRequest.pending,(state) => {
      state.loading = true;
      state.error = null;
    });
    builder.addCase(loginRequest.fulfilled,(state,action) => {
      state.loginInfo = action.payload;
      state.isLoggedIn = true;
      state.error = null;
      state.loading = false;
    });
    builder.addCase(loginRequest.rejected,action) => {
      if (action.payload) {
        state.error = {
          message: action.payload.message,};
      } else {
        state.error = action.error;
      }
      state.loading = false;
    }); 
  },});

export const selectLoadingState = (state: AppStateType) => state.auth.loading;
export const selectLoginError = (state: AppStateType) => state.auth.error;

export const { clearAsyncError } = authSlice.actions;

export const authReducer = authSlice.reducer;

解决方法

对我来说，这原来是 redux 切片之间的循环引用。 请参阅 redux toolkit docs 和 this 答案。