多个州，同一个动作创建者

Question

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

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。

Answer 1

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

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

Answer 2

实际上，你的州应该包含你的两个柜台：

export default (state, action) => {
   switch (action.type) {
       case 'INCREMENT':
            return {
                ...state,
                [action.counter]: {
                     ...state[action.counter],
                     value: state[action.counter].value + 1
                }
            };

        case 'DECREMENT':
             return {
                ...state,
                [action.counter]: {
                     ...state[action.counter],
                     value: state[action.counter].value - 1
                }
            };
        default:
             return state;
     }
};

export function increment(counterNumber) {
   return {
       type: 'INCREMENT',
       counter: counterNumber
   };
}

export function decrement(counterNumber) {
   return {
       type: 'DECREMENT',
       counter: counterNumber
   };
}

稍后您可以访问计数器值或任何其他计数器数据，如：

 this.state[counterNumber].value

当然，默认状态是：

{
    1: {
        value: 0,
        someOtherProperty: false
    },
    2: {
        value: 0,
        someOtherProperty: true
    },
}