¿Los eventos (eventos DOM o eventos del sistema) tienen una relación 1: 1 con las acciones? es decir, ¿debería un evento de un solo clic desencadenar solo una acción?

Por ejemplo, supongamos que tenemos una página que muestra una tabla de 10 filas y 2 columnas. Cada fila tiene un campo Producto y un campo Cantidad. El campo Cantidad tiene una entrada de rango con un rango de [0, 10]. El usuario puede establecer la cantidad de cada producto individualmente.

El usuario también tiene 2 opciones, mediante el uso de 2 botones.

Al presionar el segundo botón se deshabilitarán todos los productos, excepto el primer producto de la tabla (estableciendo efectivamente su Cantidad en 0 y el usuario ya no puede interactuar con ellos para establecer su Cantidad). Llamemos estoOption BAl presionar el primer botón, se habilitan todos los Productos después del primero (de forma predeterminada, se establece su Cantidad en 1 para cada uno de ellos) y el usuario puede interactuar nuevamente con ellos, para establecer sus cantidades individualmente. Llamemos estoOption 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
 `````````

Este simple objeto describe el estado de esta 'aplicación'.

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

También tenemos estos 4 creadores de acciones 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 }
    }
}

En aras de la simplicidad, solo tenemos un reductor.

En este ejemplo, seleccionandoOption B debería tener los siguientes efectos sobre el estado:

Cambiooption aBEstablecer la cantidad de cadaproduct después del primero para0

SeleccionandoOption A debería tener los siguientes efectos en el estado, respectivamente:

Cambiooption aAEstablecer la cantidad de cadaproduct después del primero para1

Incrementar la cantidad de Producto A debería tener los siguientes efectos en el estado:

Incremente la cantidad de Producto A en 1

¿Cuál sería elapropiado ¿Cómo implementar estos cambios?

una) Tener elonClick controlador de laoption los botones hacen lo siguiente:

Disparar unstore.dispatch(setOption(option))Para cada producto después del primero dispara unstore.dispatch(setAmount(productName, amount)) (amount = 1 para la opción A, 0 para la opción B)

si) Tener elonClick controlador de laoption los botones hacen lo siguiente:

Disparar unstore.dispatch(setOption(option))

Y que el reductor cambie eloption así como elamount de cada producto después del primero a la cantidad especificada (amount = 1 para la opción A, 0 para la opción B)

Si vamos conuna) cada caso en elswitch (action) {} La declaración del reductor trata solo un aspecto del estado, pero tenemos que disparar más de una acción desde unaclick evento

Si vamos consi) disparamos solo una acción desde elclick evento pero el caso deSET_OPTION en el reductor no solo cambia eloption pero también elamount de productos.