Hinzufügen eines Reducers zur Redux-Anwendung

In der letzten Lektion haben wir die Komponente UserReaction erstellt, damit jedes Produkt auch Benutzerreaktionen haben kann. Jetzt müssen wir einen Reducer schreiben, der den Zähler für Reaktionen verarbeitet, wenn ein Benutzer auf den Button einer bestimmten Reaktion klickt.

Öffnen wir unsere Produktanwendung und darin die Datei productsSlice.js mit allen Reducern. Jetzt erstellen wir in der Eigenschaft reducers einen weiteren Reducer reactionClicked (wir können ihn an erste Stelle setzen - vor productAdded, obwohl das egal ist). Wie üblich übergeben wir ihm die Parameter state und action:

products/productsSlice.jsreactionClicked(state, action) {},

Und jetzt schreiben wir innerhalb der geschweiften Klammern, die wir in vorherigen Schritt leer gelassen haben, den Code dafür. Zuerst extrahieren wir die Produkt-ID aus dem payload des action-Objekts und den Namen der Reaktion:

products/productsSlice.jsconst { productId, reaction } = action.payload

Dann holen wir das benötigte Produkt aus dem übergebenen State:

products/productsSlice.jsconst currentProduct = state.find(product => product.id === productId)

Und wenn ein solches Produkt vorhanden ist, erhöhen wir den Wert der übergebenen Reaktion um 1:

products/productsSlice.jsif (currentProduct) {
  currentProduct.reactions[reaction]++
}

Das ist alles, unser Code für reactionClicked ist fertig:

products/productsSlice.jsreactionClicked(state, action) {
  const { productId, reaction } = action.payload
  const currentProduct = state.find(product => product.id === productId)
  if (currentProduct) {
    currentProduct.reactions[reaction]++
  }
},

Lasst uns am Ende der Datei den Export des erhaltenen Action Creators hinzufügen:

products/productsSlice.jsxexport const {
  reactionClicked,
  productAdded,
  productUpdated
} = productsSlice.actions

Hier sind zwei wichtige Punkte zu beachten. Wie Sie sich aus vorherigen Lektionen erinnern - das direkte Aktualisieren des Werts im Reducer-Code auf diese Weise ist nicht erlaubt (schauen Sie sich diese Zeile an: reactions[reaction]++), aber das wird uns durchgehen, weil wir es innerhalb von createSlice tun, welches die Bibliothek Immer verwendet. Sie kümmert sich darum, unseren Code in eine "sichere" Aktualisierung des Werts umzuwandeln. Dies erlaubt uns, komplexe Dinge auf einfachere Weise zu schreiben.

Als nächstes ist zu beachten - das action-Objekt sollte die minimal mögliche Menge an Informationen enthalten - nur genug, um anzugeben, was passiert ist. Es sollten keine Berechnungen darin durchgeführt werden. Alle Berechnungen für die Aktualisierung des States sollten im Reducer erfolgen, hier kann dafür so viel Logik geschrieben werden, wie benötigt wird.