Redux存储在不同的reducer中两次显示相同的状态。

huangapple go评论69阅读模式
英文:

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

huangapple
  • 本文由 发表于 2023年2月18日 22:40:33
  • 转载请务必保留本文链接:https://go.coder-hub.com/75494076.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定