我正在为我的react应用程序使用Redux Toolkit。我试图像这样配置redux store:
// index.js (store)
import { combineReducers, configureStore } from '@reduxjs/toolkit'
import { composeWithDevTools } from 'redux-devtools-extension'
import authReducer from './slices/auth.slice'
import userReducer from './slices/user.slice'
import navigationReducer from './slices/navigation.slice'
const rootReducer = combineReducers({
auth: authReducer,
users: userReducer,
navigation: navigationReducer,
});
const composedEnhancer = composeWithDevTools({
});
const store = configureStore({
reducer: rootReducer,
devTools: true,
enhancers: [composedEnhancer],
});
export default store;
这是其中一个切片的示例:authSlice.js
import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { userInstance } from "../instances";
export const loginUser = createAsyncThunk(
"auth/login",
async (data, { rejectWithValue }) => {
try {
const response = await userInstance.post("/auth", data);
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
export const registerUser = createAsyncThunk(
"auth/register",
async (data, { rejectWithValue }) => {
try {
const response = await userInstance.post("/auth/new", data);
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
export const loadUser = createAsyncThunk(
"auth/current",
async (data, { rejectWithValue }) => {
try {
const response = await userInstance.get("/");
return response.data;
} catch (error) {
return rejectWithValue(error.response.data);
}
}
);
const initialState = {
isLoading: null,
token: localStorage.getItem("jw-token"),
isAuthenticated: false,
error: null,
user: null,
};
export const authSlice = createSlice({
name: "auth",
initialState,
reducers: {
logoutUser: (state) => {
localStorage.removeItem("jw-token");
state.isLoading = false;
state.error = null;
state.isAuthenticated = false;
state.user = null;
},
},
extraReducers: (builder) => {
builder
.addCase(loginUser.pending, (state) => {
state.isLoading = true;
state.error = null;
state.isAuthenticated = false;
state.user = null;
})
.addCase(loginUser.fulfilled, (state, { payload }) => {
localStorage.setItem("jw-token", payload);
state.isLoading = false;
state.error = null;
state.isAuthenticated = true;
state.user = null;
})
.addCase(loginUser.rejected, (state, { payload }) => {
localStorage.removeItem("jw-token");
state.isLoading = false;
state.error = payload;
state.isAuthenticated = false;
state.user = null;
})
.addCase(registerUser.pending, (state) => {
state.isLoading = true;
state.error = null;
state.isAuthenticated = false;
state.user = null;
})
.addCase(registerUser.fulfilled, (state, { payload }) => {
localStorage.setItem("jw-token", payload);
state.isLoading = false;
state.error = null;
state.isAuthenticated = true;
state.user = null;
})
.addCase(registerUser.rejected, (state, { payload }) => {
localStorage.removeItem("jw-token");
state.isLoading = false;
state.error = payload;
state.isAuthenticated = false;
state.user = null;
})
.addCase(loadUser.pending, (state) => {
state.isLoading = true;
state.error = null;
state.isAuthenticated = false;
state.user = null;
})
.addCase(loadUser.fulfilled, (state, { payload }) => {
state.isLoading = false;
state.error = null;
state.isAuthenticated = true;
state.user = payload;
})
.addCase(loadUser.rejected, (state, { payload }) => {
localStorage.removeItem("jw-token");
state.isLoading = false;
state.error = payload;
state.isAuthenticated = false;
state.user = null;
})
.addDefaultCase((state) => {
state.isLoading = null;
state.token = localStorage.getItem("jw-token");
state.isAuthenticated = false;
state.error = null;
state.user = null;
});
},
});
export const {
logoutUser
} = authSlice.actions;
export default authSlice.reducer;
我面临的问题是,当我运行npm start
时,它抛出一个错误:“期望reducer是一个函数”:
如何解决这个问题?谁能给我解释一下是什么原因导致了这个问题?PS:这个项目是一个从Github克隆的项目,原始项目没有使用Redux Toolkit,而是使用了Redux Thunk
1条答案
按热度按时间smdnsysy1#
此问题已解决!对于任何面临相同问题的人,只需删除Redux Devtools,因为默认情况下,Redux Toolkit中集成了:store.js如下所示: