时间戳

首页 > 解决方案 > 多个状态，相同的动作创建者

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

问题描述

我有两个柜台，COUNTER_1和COUNTER_2。所以我创建了多个减速器来处理它们。

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;
 }
};

现在我为他们创建了一个动作创建器，就像

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

是否可以与action creator上面示例中所示的多个减速器相同。我可能有其他功能，COUNTER_1这些功能可能不存在于COUNTER_2某个地方。但两者的基本特征都是INCREMENT和DECREMENT。

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

标签： javascriptreactjsredux

解决方案

您可以为不同的计数器使用相同的减速器。

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}}

推荐阅读