У событий (событий DOM или системных событий) есть отношение 1: 1 к действиям? т.е. одно событие щелчка должно вызвать только одно действие?

Например, скажем, у нас есть страница, которая отображает таблицу из 10 строк и 2 столбцов. Каждая строка имеет поле Product и поле Amount. Поле Amount имеет диапазон ввода с диапазоном [0, 10]. Пользователь может установить количество каждого продукта индивидуально.

Пользователю также предоставляется 2 варианта, благодаря использованию 2 кнопок.

Нажатие на вторую кнопку отключит все продукты, кроме первого, в таблице (фактически установив их количество на 0, и пользователь больше не сможет взаимодействовать с ними, чтобы установить их количество). Давайте назовем этоOption BНажатие первой кнопки активирует все продукты после первого (по умолчанию для каждого из них устанавливается значение «1»), и пользователь может снова взаимодействовать с ними, чтобы установить их суммы индивидуально. Давайте назовем этоOption A.

Option A selected:

    | PRODUCT          | AMOUNT    |
    |------------------|-----------|
    | Product A        |   - 4 +   |
    | Product B        |   - 0 +   |
    | Product C        |   - 4 +   |
    ````````````````````````````````

 _________
| Option A|  OPTION B
 `````````

Option B selected:

    | PRODUCT          | AMOUNT    |
    |------------------|-----------|
    | Product A        |   - 4 +   |
    | Product B        |  Disabled | (Amount == 0)
    | Product C        |  Disabled | (Amount == 0)
    ````````````````````````````````

          _________
OPTION A | OPTION B|
          `````````

Option A selected again:

    | PRODUCT          | AMOUNT    |
    |------------------|-----------|
    | Product A        |   - 4 +   |
    | Product B        |   - 1 +   |
    | Product C        |   - 1 +   |
    ````````````````````````````````

 _________
| Option A|  OPTION B
 `````````

Состояние этого «приложения» описывается этим простым объектом

state = {
    option : <String>,
    products : [
        {
            name : <String>,
            amount : <Integer>
        }, ...
    ]
}

У нас также есть 4 простых создателя действий:

function setOption(option) {
    return { type : 'SET_OPTION', option : option};
}

function incAmount(productName) {
    return {
        type : 'INCREMENT_AMOUNT',
        product : productName
    }
} 

function decAmount(productName) {
    return {
        type : 'DECREMENT_AMOUNT',
        product : productName
    }
}

function setAmount(productName, amount) {
    return {
        type : 'SET_AMOUNT',
        payload : { product : productName, amount : amount }
    }
}

Для простоты у нас есть только один редуктор.

В этом примере, выбравOption B должен иметь следующие эффекты на состояние:

+ Изменитьoption вBУстановите количество каждогоproduct после первого0

выбирающийOption A должны иметь следующие эффекты на состояние соответственно:

+ Изменитьoption вAУстановите количество каждогоproduct после первого1

Увеличение количества продукта А должно иметь следующие последствия для государства:

Увеличить количество продукта А на 1

Что будетправильный способ реализовать эти изменения?

а) ЕстьonClick обработчикoption кнопки делают следующее:

Огоньstore.dispatch(setOption(option))Для каждого продукта после первого запускаstore.dispatch(setAmount(productName, amount)) (amount = 1 для варианта A, 0 для варианта B)

б) ЕстьonClick обработчикoption кнопки делают следующее:

Огоньstore.dispatch(setOption(option))

И есть редуктор изменитьoption так же хорошо какamount каждого продукта после первого до указанной суммы (amount = 1 для варианта A, 0 для варианта B)

Если мы пойдем са) каждый случай вswitch (action) {} Заявление редуктора касается только одного аспекта состояния, но мы должны запустить более одного действия из одногоclick событие

Если мы пойдем сб) мы запускаем только одно действие изclick событие, но случай дляSET_OPTION в редукторе не только меняетoption но такжеamount продуктов.