Do events and actions have a 1:1 relationship in Redux?
<p><strong>Do events (DOM events or system events) have a 1:1 relationship with actions? i.e. should a single click event trigger only one action?</strong></p>

<p>For example, let's say we have a page which displays a table of 10 rows and 2 columns. Each row has a Product field and an Amount field. The Amount field has a range input with a range of [0, 10]. The user can set the Amount of each Product individually. </p>

<p>The user is also given 2 options, through the use of 2 buttons. </p>

<ul>
<li>Pressing the second button will disable all but the first product in the table (effectively setting their Amount to 0 and the user can no longer interact with them to set their Amount). Let's call this <code>Option B</code></li>
<li>Pressing the first button enables all Products after the first (by default setting their Amount to 1 for each of them) and the user can once again interact with them, to set their amounts individually. Let's call this <code>Option A</code>.</li>
</ul>

<pre>

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


</pre>

<p>The state of this 'app' is described by this simple object</p>

<pre><code>state = {
    option : &lt;String&gt;,
    products : [
        {
            name : &lt;String&gt;,
            amount : &lt;Integer&gt;
        }, ...
    ]
}
</code></pre>

<p>We also have these 4 simple action creators:</p>

<pre><code>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 }
    }
}
</code></pre>

<p>For the sake of simplicity, we have only one reducer.</p>

<p>In this example, selecting <code>Option B</code> should have the following effects on the state : </p>

<ul>
<li>Change <code>option</code> to <code>B</code></li>
<li>Set the amount of every <code>product</code> after the first to <code>0</code></li>
</ul>

<p>Selecting <code>Option A</code> should have the following effects on the state, respectively : </p>

<ul>
<li>Change <code>option</code> to <code>A</code></li>
<li>Set the amount of every <code>product</code> after the first to <code>1</code></li>
</ul>

<p>Incrementing the amount of Product A should have the following effects on the state : </p>

<ul>
<li>Increment the amount of Product A by 1</li>
</ul>

<p><strong>What would be the <em>proper</em> way to implement these changes?</strong></p>

<p><strong>a)</strong> Have the <code>onClick</code> handler of the <code>option</code> buttons do the following: </p>

<ul>
<li>Fire a <code>store.dispatch(setOption(option))</code></li>
<li>For each product after the first one fire a <code>store.dispatch(setAmount(productName, amount))</code> (<code>amount</code> = 1 for option A, 0 for option B)</li>
</ul>

<p><strong>b)</strong> Have the <code>onClick</code> handler of the <code>option</code> buttons do the following: </p>

<ul>
<li><p>Fire a <code>store.dispatch(setOption(option))</code></p>

<p>And have the reducer change the <code>option</code> as well as the <code>amount</code> of every product after the first one to the specified amount (<code>amount</code> = 1 for option A, 0 for option B)</p></li>
</ul>

<p>If we go with <strong>a)</strong> each case in the <code>switch (action) {}</code> statement of the reducer deals with just one aspect of the state, but we have to fire more than one action from one <code>click</code> event</p>

<p>If we go with <strong>b)</strong> we fire only one action from the <code>click</code> event but the case for <code>SET_OPTION</code> in the reducer not only changes the <code>option</code> but also the <code>amount</code> of products.</p>