Haben Ereignisse (DOM-Ereignisse oder Systemereignisse) eine 1: 1-Beziehung zu Aktionen? Sollte ein einzelnes Klickereignis nur eine Aktion auslösen?

Nehmen wir zum Beispiel an, wir haben eine Seite, auf der eine Tabelle mit 10 Zeilen und 2 Spalten angezeigt wird. Jede Zeile hat ein Produktfeld und ein Betragsfeld. Das Feld Betrag verfügt über einen Bereichseingang mit einem Bereich von [0, 10]. Der Benutzer kann die Menge jedes Produkts individuell einstellen.

Dem Benutzer werden durch die Verwendung von 2 Tasten auch 2 Optionen angeboten.

Durch Drücken der zweiten Taste werden alle Produkte außer dem ersten Produkt in der Tabelle deaktiviert (indem der Betrag auf 0 gesetzt wird und der Benutzer nicht mehr mit ihnen interagieren kann, um den Betrag festzulegen). Nennen wir dasOption BDurch Drücken der ersten Taste können alle Produkte nach der ersten (standardmäßig wird die Menge für jedes Produkt auf 1 festgelegt) und der Benutzer kann erneut mit ihnen interagieren, um ihre Mengen individuell festzulegen. Nennen wir dasOption 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
 `````````

Der Zustand dieser 'App' wird durch dieses einfache Objekt beschrieben

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

Wir haben auch diese 4 einfachen Aktionsersteller:

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

Der Einfachheit halber haben wir nur einen Reduzierer.

In diesem Beispiel wählen SieOption B sollte folgende Auswirkungen auf den Zustand haben:

Veränderungoption zuBStellen Sie die Menge von jedem @ eproduct nach dem ersten zu0

AuswahlOption A sollte folgende Auswirkungen auf den Zustand haben:

Veränderungoption zuAStellen Sie die Menge von jedem @ eproduct nach dem ersten zu1

as Erhöhen der Menge von Produkt A sollte die folgenden Auswirkungen auf den Zustand habe

Erhöhen Sie die Menge von Produkt A um 1

Was würde das sein richtiges Weg, um diese Änderungen zu implementieren?

ein Habe denonClick Handler desoption -Tasten haben folgende Funktionen:

Fire astore.dispatch(setOption(option))Für jedes Produkt nach dem ersten Brand einstore.dispatch(setAmount(productName, amount)) (amount = 1 für Option A, 0 für Option B)

b) Habe denonClick Handler desoption -Tasten haben folgende Funktionen:

Fire astore.dispatch(setOption(option))

Und der Reduzierer muss das @ ändeoption ebenso wieamount von jedem Produkt nach dem ersten bis zur angegebenen Menge amount = 1 für Option A, 0 für Option B)

Wenn wir mit @ gehein jeweils imswitch (action) {} statement of the reducer befasst sich nur mit einem Aspekt des Staates, aber wir müssen mehr als eine Aktion von einem abfeuernclick Veranstaltun

Wenn wir mit @ gehb) wir feuern nur eine Aktion aus demclick Event aber der Fall fürSET_OPTION im Reduzierer ändert nicht nur dieoption aber auch dasamount von Produkten