Question

好吧，我只有一个化简器，然后将其拆分为多个化简器。当化简器为一个时，一切工作正常，但是现在，每次派遣一个动作时，都会使以前的状态恢复为默认值。我真的不知道发生了什么，这没有逻辑。例如

这是五分之一的减速器，其他的减速器就是这样。

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情况无需进行任何更改，只需返回 current 状态即可。相反，您将其替换为初始状态，从而覆盖了当前状态。

换句话说，更改此：

default:
  return initState;

对此：

default:
  return state;

您可能未曾遇到过这种情况，因为您从未输入默认案例。 switch的较早几行说明了所有可能的操作。但是，由于现在这个reducer故意不处理某些动作，因此默认情况正在执行。

在分派了每个操作之后，Redux CombineReducers返回defaultState

1 个答案: