javascript - 多个状态，相同的 Action 创建者

Question

我有两个计数器:COUNTER_1 和 COUNTER_2。所以我创建了多个 reducer 来处理它们。

export default (state = 0, action) => {
switch (action.type) {
 case "INCREMENT_1":
   return state + 1;
 case "DECREMENT_1":
   return state - 1;
 default:
   return state;
 }
};

这是针对 COUNTER_1 的，对于我创建的 COUNTER_2 也是如此

export default (state = 0, action) => {
 switch (action.type) {
  case "INCREMENT_2":
   return state + 1;
  case "DECREMENT_2":
   return state - 1;
  default:
   return state;
 }
};

现在我为他们创建了一个 Action 创建器，如下所示

export function increment(counterNumber) {
 let stateSelector = counterNumber === 1 ? "INCREMENT_1": "INCREMENT_2"
 return {
  type: stateSelector 
 };
}

对于多个 reducer 来说，如上例所示，拥有相同的 Action 创建者可以吗？我可能有 COUNTER_1 的附加功能，而 COUNTER_2 可能没有这些功能。但两者的基本特征都是增量和减量。

这样我以后就可以独立地向两个计数器添加功能，同时保持基本功能相同。也许仅为 COUNTER_1 添加 INCRMENT_BY_TWO。

Answer 1

您可以对不同的计数器使用相同的 reducer 。

function createCounterWithNamedType(counterName = '') {
    return function counter(state = 0, action) {
        switch (action.type) {
            case `INCREMENT_${counterName}`:
                return state + 1;
            case `DECREMENT_${counterName}`:
                return state - 1;
            default:
                return state;
        }
    }
}

const rootReducer = combineReducers({
    counterA : createCounterWithNamedType('A'),
    counterB : createCounterWithNamedType('B'),
    counterC : createCounterWithNamedType('C'),
});

store.dispatch({type : 'INCREMENT_B'});
console.log(store.getState());
// {counterA : 0, counterB : 1, counterC : 0const rootReducer = combineReducers({
    counterA : createCounterWithNamedType('A'),
    counterB : createCounterWithNamedType('B'),
    counterC : createCounterWithNamedType('C'),
});

store.dispatch({type : 'INCREMENT_B'});
console.log(store.getState());
// {counterA : 0, counterB : 1, counterC : 0}}