Eventos e ações têm um relacionamento 1: 1 no Redux?
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 B
Pressionar 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:
option
paraB
Defina a quantidade de cadaproduct
depois do primeiro a0
SelecionandoOption A
deve ter os seguintes efeitos no estado, respectivamente:
option
paraA
Defina 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 1Qual seria oapropriado maneira de implementar essas mudanças?
a) Tenha oonClick
manipulador dooption
botões faça o seguinte:
store.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.