reactjs - 初始化前无法访问 'authReducer'

Question

我遇到了错误 ReferenceError: Cannot access 'authReducer' before initialization使用 Redux与 redux-toolkit和 redux-persist我有 3 个 reducer 与 combineReducers 合并在一起来自 redux-toolkit .然后我正在配置存储，将其中一个 reducer 持久化到 localStorage .当我运行应用程序时，我看到上面提到的错误消息，它指向 authSlice ，如果我将其注释掉，错误消息就会消失，我可以成功运行该应用程序。我的问题是我不明白为什么错误出现在 authSlice 中。特别是因为它或多或少与其他 reducer 相同。

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);

我的根 reducer

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,
  LoginParams,
  { 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,
      role,
      access,
      refresh,
      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, (state, 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;

Answer 1

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