Redux CombineReducers возвращает defaultState после каждого отправленного действия

Question

хорошо, у меня был один редуктор, и я разделил его на несколько редукторов. Когда редуктор был один, все работало хорошо, но теперь, каждый раз, когда отправляется действие, делает предыдущие изменения обратно в состояние по умолчанию. Я действительно не знаю, что происходит, у этого нет логики c. Для примера

Это один из пяти редукторов, а остальные редукторы такие.

const initState = { name: null || "You", gameOn: false, homePage: true };
const navigationReducer = (state = initState, { type, payload }) => {
  switch (type) {
    case "GET_USER_NAME":
      return {
        ...state,
        name: payload.name
      };

    case "SETTING_GAME":
      return {
        ...state,
        gameOn: true,
        homePage: false
      };

    case "GO_TO_HOME":
      return {
        ...state,
        homePage: true,
        gameOn: false,
        name: null || "You"
      };

    case "RESET":
      return { ...state, name: null || "You", gameOn: false, homePage: true };

    default:
      return initState;
  }
};

export default navigationReducer;

А вот в Index. js Я экспортирую rootReducer

import { combineReducers } from "redux";
import navigationReducer from "./navigationReducer";
import deckReducer from "./deckReducer";
import gameReducer from "./gameReducer";
import bidReducer from "./bidReducer";
import winnerReducer from "./winnerReducer";

const rootReducer = combineReducers({
  navigation: navigationReducer,
  deck: deckReducer,
  game: gameReducer,
  bid: bidReducer,
  winner: winnerReducer
});

export default rootReducer;

После этого я настраиваю магазин следующим образом

import { createStore, applyMiddleware, compose } from "redux";
import { createEpicMiddleware, combineEpics } from "redux-observable";
import rootReducer from "../reducers";

import {
  gamePreparationEpic,
  deckIsReadyEpic,
  serveHandsToPlayersEpic,
  evaluateHandsEpic,
  findTheWinnerEpic,
  resetGameEpic,
  cardIsSelectedEpic,
  fillCardsEpic,
  cpuBidEpic
} from "../epics";

const configureStore = () => {
  const epicsArr = [
    gamePreparationEpic,
    deckIsReadyEpic,
    serveHandsToPlayersEpic,
    evaluateHandsEpic,
    findTheWinnerEpic,
    resetGameEpic,
    cardIsSelectedEpic,
    fillCardsEpic,
    cpuBidEpic
  ];
  const epics = combineEpics(...epicsArr);
  const epicMiddleware = createEpicMiddleware();
  const middleware = [epicMiddleware];
  const store = createStore(
    rootReducer,
    compose(
      applyMiddleware(...middleware),
      window.devToolsExtension ? window.devToolsExtension() : f => f
    )
  );
  epicMiddleware.run(epics);
  return store;
};

export { configureStore };

И, наконец, использую мой магазин здесь

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

import { configureStore } from "./store";
import { Provider } from "react-redux";

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <App />,
  </Provider>,
  document.getElementById("root")
);

serviceWorker.unregister();

Я действительно не знаю, что происходит, у вас есть парни идея? Спасибо за ваше время.

Answer 1

Ваш default кейс должен ничего не менять, что делается путем возврата текущего состояния. Вместо этого вы заменяете его исходным состоянием, перезаписывая текущее состояние.

Другими словами, измените это:

default:
  return initState;

на следующее:

default:
  return state;

Вы, вероятно, никогда не сталкивались с этим до разделения ваших редукторов, потому что вы никогда не вводили регистр по умолчанию. Каждое возможное действие было учтено в более ранних строках switch. Но теперь, когда некоторые действия намеренно не обрабатываются этим редуктором, выполняется задание по умолчанию.