Os eventos (eventos DOM ou eventos do sistema) têm um relacionamento 1: 1 com as ações? ou seja, um evento de clique único deve acionar apenas uma ação?

Por exemplo, digamos que temos uma página que exibe uma tabela de 10 linhas e 2 colunas. Cada linha possui um campo Produto e um valor. O campo Valor possui uma entrada de intervalo com um intervalo de [0, 10]. O usuário pode definir a quantidade de cada produto individualmente.

O usuário também recebe 2 opções, através do uso de 2 botões.

Pressionar o segundo botão desabilitará todos, exceto o primeiro produto da tabela (configurando efetivamente o Valor para 0 e o usuário não poderá mais interagir com ele para definir o Valor). Vamos chamar issoOption BPressionar o botão primeiro habilita todos os produtos após o primeiro (por padrão, definindo seu valor como 1 para cada um deles) e o usuário pode novamente interagir com eles, para definir seus valores individualmente. Vamos chamar issoOption 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
 `````````

O estado deste 'aplicativo' é descrito por este objeto simples

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

Também temos esses 4 criadores de ação simples:

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

Por uma questão de simplicidade, temos apenas um redutor.

Neste exemplo, selecionandoOption B deve ter os seguintes efeitos no estado:

mudançaoption paraBDefina a quantidade de cadaproduct depois do primeiro a0

SelecionandoOption A deve ter os seguintes efeitos no estado, respectivamente:

mudançaoption paraADefina a quantidade de cadaproduct depois do primeiro a1

Incrementar a quantidade do produto A deve ter os seguintes efeitos no estado:

Aumente a quantidade do produto A em 1

Qual seria oapropriado maneira de implementar essas mudanças?

a) Tenha oonClick manipulador dooption botões faça o seguinte:

Disparar umstore.dispatch(setOption(option))Para cada produto após o primeiro disparar umstore.dispatch(setAmount(productName, amount)) (amount = 1 para a opção A, 0 para a opção B)

b) Tenha oonClick manipulador dooption botões faça o seguinte:

Disparar umstore.dispatch(setOption(option))

E faça com que o redutor mude ooption assim como oamount de cada produto após o primeiro na quantidade especificada (amount = 1 para a opção A, 0 para a opção B)

Se formos coma) cada caso noswitch (action) {} A declaração do redutor lida com apenas um aspecto do estado, mas temos que disparar mais de uma ação de umaclick evento

Se formos comb) disparamos apenas uma ação doclick evento, mas o caso deSET_OPTION no redutor não apenas altera aoption mas também oamount de produtos.