英文:
Redux store shows the same state twice, in different reducers
问题
Redux DevTools显示两个不同reducer的相同状态
我试图在我的React项目中使用Redux添加第二个reducer,以便查看我的状态的概述。每当我在Redux DevTools中查看状态时,我看到相同的状态,但在不同的reducer下。
DevTools插件在generalSlice和plannerSlice中都显示plannerSlice.js的内容(createDialogOpen和editDialogOpen)。
如何在devTools中将darkTheme
放在generalSlice下?
Store.js
import { configureStore } from "@reduxjs/toolkit";
import generalSlice from "./slicers/plannerSlice";
import plannerSlice from "./slicers/plannerSlice";
export default configureStore({
reducer: {
general: generalSlice,
planner: plannerSlice,
},
});
generalSlice.js
import { createSlice } from "@reduxjs/toolkit";
export const generalSlice = createSlice({
name: "general",
initialState: {
appTheme: "dark",
},
reducers: {
appTheme: (state) => {
if (state.appTheme === "dark") {
state.appTheme = "light";
} else {
state.appTheme = "light";
}
},
},
});
// Action creators are generated for each case reducer function
export const { appTheme } = generalSlice.actions;
export default generalSlice.reducer;
plannerSlice.js
import { createSlice } from "@reduxjs/toolkit";
export const plannerSlice = createSlice({
name: "planner",
initialState: {
createDialogOpen: false,
editDialogOpen: false,
},
reducers: {
createDialogOpen: (state, action) => {
state.createDialogOpen = action.payload;
},
editDialogOpen: (state, action) => {
state.editDialogOpen = action.payload;
},
},
});
// Action creators are generated for each case reducer function
export const { createDialogOpen, editDialogOpen } = plannerSlice.actions;
export default plannerSlice.reducer;
(Note: I've replaced HTML entities with their corresponding characters for clarity.)
英文:
Redux DevTools shows the same state for two different reducers
I am trying to add a second reducer in my React project using Redux to bring some overview of my state. Whenever I view the state in Redux DevTools I see the same state but under different reducers.
The DevTools plugins show the content of the plannerSlice.js (createDialogOpen & editDialogOpen) both in the generalSlice and also in plannerSlice.
How can I get darkTheme
under my generalSlice in the devTools?
Store.js
import { configureStore } from "@reduxjs/toolkit";
import generalSlice from "./slicers/plannerSlice";
import plannerSlice from "./slicers/plannerSlice";
export default configureStore({
reducer: {
general: generalSlice,
planner: plannerSlice,
},
});
generalSlice.js
import { createSlice } from "@reduxjs/toolkit";
export const generalSlice = createSlice({
name: "general",
initialState: {
appTheme: "dark",
},
reducers: {
appTheme: (state) => {
if (state.appTheme === "dark") {
state.appTheme = "light";
} else {
state.appTheme = "light";
}
},
},
});
// Action creators are generated for each case reducer function
export const { appTheme } = generalSlice.actions;
export default generalSlice.reducer;
plannerSlice.js
import { createSlice } from "@reduxjs/toolkit";
export const plannerSlice = createSlice({
name: "planner",
initialState: {
createDialogOpen: false,
editDialogOpen: false,
},
reducers: {
createDialogOpen: (state, action) => {
state.createDialogOpen = action.payload;
},
editDialogOpen: (state, action) => {
state.editDialogOpen = action.payload;
},
},
});
// Action creators are generated for each case reducer function
export const { createDialogOpen, editDialogOpen } = plannerSlice.actions;
export default plannerSlice.reducer;
答案1
得分: 2
Store.js
import generalSlice from "./slicers/plannerSlice";
import plannerSlice from "./slicers/plannerSlice";
英文:
As I just read my question once more, I noticed that I import the same slice twice... Just under a different name.
Store.js
import generalSlice from "./slicers/plannerSlice";
import plannerSlice from "./slicers/plannerSlice";
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论