Несколько состояний, один и тот же создатель действий

Question

У меня есть два счетчика, 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.

Answer 1

На самом деле, ваш штат должен содержать оба ваших счетчика:

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

Answer 2

Вы можете использовать один и тот же редуктор для разных счетчиков.

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