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

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

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

  1. import { configureStore } from "@reduxjs/toolkit";
  2. import generalSlice from "./slicers/plannerSlice";
  3. import plannerSlice from "./slicers/plannerSlice";
  4. export default configureStore({
  5. reducer: {
  6. general: generalSlice,
  7. planner: plannerSlice,
  8. },
  9. });

generalSlice.js

  1. import { createSlice } from "@reduxjs/toolkit";
  2. export const generalSlice = createSlice({
  3. name: "general",
  4. initialState: {
  5. appTheme: "dark",
  6. },
  7. reducers: {
  8. appTheme: (state) => {
  9. if (state.appTheme === "dark") {
  10. state.appTheme = "light";
  11. } else {
  12. state.appTheme = "light";
  13. }
  14. },
  15. },
  16. });
  17. // Action creators are generated for each case reducer function
  18. export const { appTheme } = generalSlice.actions;
  19. export default generalSlice.reducer;

plannerSlice.js

  1. import { createSlice } from "@reduxjs/toolkit";
  2. export const plannerSlice = createSlice({
  3. name: "planner",
  4. initialState: {
  5. createDialogOpen: false,
  6. editDialogOpen: false,
  7. },
  8. reducers: {
  9. createDialogOpen: (state, action) => {
  10. state.createDialogOpen = action.payload;
  11. },
  12. editDialogOpen: (state, action) => {
  13. state.editDialogOpen = action.payload;
  14. },
  15. },
  16. });
  17. // Action creators are generated for each case reducer function
  18. export const { createDialogOpen, editDialogOpen } = plannerSlice.actions;
  19. 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

  1. import { configureStore } from "@reduxjs/toolkit";
  2. import generalSlice from "./slicers/plannerSlice";
  3. import plannerSlice from "./slicers/plannerSlice";
  4. export default configureStore({
  5. reducer: {
  6. general: generalSlice,
  7. planner: plannerSlice,
  8. },
  9. });

generalSlice.js

  1. import { createSlice } from "@reduxjs/toolkit";
  2. export const generalSlice = createSlice({
  3. name: "general",
  4. initialState: {
  5. appTheme: "dark",
  6. },
  7. reducers: {
  8. appTheme: (state) => {
  9. if (state.appTheme === "dark") {
  10. state.appTheme = "light";
  11. } else {
  12. state.appTheme = "light";
  13. }
  14. },
  15. },
  16. });
  17. // Action creators are generated for each case reducer function
  18. export const { appTheme } = generalSlice.actions;
  19. export default generalSlice.reducer;

plannerSlice.js

  1. import { createSlice } from "@reduxjs/toolkit";
  2. export const plannerSlice = createSlice({
  3. name: "planner",
  4. initialState: {
  5. createDialogOpen: false,
  6. editDialogOpen: false,
  7. },
  8. reducers: {
  9. createDialogOpen: (state, action) => {
  10. state.createDialogOpen = action.payload;
  11. },
  12. editDialogOpen: (state, action) => {
  13. state.editDialogOpen = action.payload;
  14. },
  15. },
  16. });
  17. // Action creators are generated for each case reducer function
  18. export const { createDialogOpen, editDialogOpen } = plannerSlice.actions;
  19. export default plannerSlice.reducer;

答案1

得分: 2

Store.js

  1. import generalSlice from "./slicers/plannerSlice";
  2. 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

  1. import generalSlice from "./slicers/plannerSlice";
  2. 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:

确定