我将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,
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;