Redux问题：仅触发单个状态的Action却导致多状态变更

在Redux开发中，仅触发与cakeReducer相关的Action，但cakeReducer和IceCreamReducer的状态均发生了变更，并未调用任何冰淇淋相关的Action。

代码示例 #

const redux = require("redux");

const createStore = redux.createStore;
const bindActionCreators = redux.bindActionCreators;
const combineReducers = redux.combineReducers;

// Actions
const CAKE_ORDERED = "CAKE_ORDERED";
const CAKE_RESTOCKED = "CAKE_RESTOCKED";
const ICECREAM_ORDERED = "ICECREAM_ORDERED";
const ICECREAM_RESTOCKED = "ICECREAM_RESTOCKED";

function orderCake(qty = 1) {
  return {
    type: CAKE_ORDERED,
    payload: qty,
  };
}
function restockCake(qty = 1) {
  return {
    type: CAKE_RESTOCKED,
    payload: qty,
  };
}
function orderIceCream(qty = 1) {
  return {
    type: ICECREAM_ORDERED,
    payload: qty,
  };
}
function restockIceCream(qty = 1) {
  return {
    type: ICECREAM_RESTOCKED,
    payload: qty,
  };
}

// Reducers
const initialCakeState = {
  numOfCakes: 10,
};

const initialIceCreamState = {
  numOfIceCreams: 20,
};

const cakeReducer = (state = initialCakeState, action) => {
  switch (action.type) {
    case CAKE_ORDERED:
      return {
        ...state,
        numOfCakes: state.numOfCakes - 1,
      };
    case CAKE_RESTOCKED:
      return {
        ...state,
        numOfCakes: state.numOfCakes + action.payload,
      };
      `enter code here`;
    default:
      return state;
  }
};

const iceCreamReducer = (state = initialIceCreamState, action) => {
  switch (action.type) {
    case ICECREAM_ORDERED:
      return {
        ...state,
        numOfIceCreams: state.numOfIceCreams - 1,
      };
    case ICECREAM_RESTOCKED:
      return {
        ...state,
        numOfIceCreams: state.numOfIceCreams + action.payload,
      };
    case CAKE_ORDERED:
      return {
        ...state,
        numOfIceCreams: state.numOfIceCreams - 1,
      };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  cake: cakeReducer,
  iceCream: iceCreamReducer,
});

// Store
const store = createStore(rootReducer);

console.log("Initial State ", store.getState());
const unsubscribe = store.subscribe(() => {
  console.log("Updated State ", store.getState());
});

const actions = bindActionCreators(
  { orderCake, restockCake, orderIceCream, restockIceCream },
  store.dispatch
);
actions.orderCake();
actions.orderCake();
actions.orderCake();
actions.restockCake(3);

unsubscribe();

输出结果 #

Initial State { cake: { numOfCakes: 10 }, iceCream: { numOfIceCreams: 20 } }
Updated State { cake: { numOfCakes: 9 }, iceCream: { numOfIceCreams: 19 } }
Updated State { cake: { numOfCakes: 8 }, iceCream: { numOfIceCreams: 18 } }
Updated State { cake: { numOfCakes: 7 }, iceCream: { numOfIceCreams: 17 } }
Updated State { cake: { numOfCakes: 10 }, iceCream: { numOfIceCreams: 17 } }

问题 #

我并未触发任何针对numOfIceCreams的Action，但它仍被更新。我想知道如何在更新numOfCakes时保持numOfIceCreams不变。

解决方法 #

已解决：不小心在iceCreamReducer中添加了CAKE_ORDERED的处理逻辑，移除该分支即可让冰淇淋状态不再随蛋糕Action变更。

内容的提问来源于stack exchange，提问作者Emdadudl Haque Apu