Redux - Reduzierstücke

Reduzierstücke sind in Redux eine reine Funktion. Reine Funktionen sind vorhersehbar. Reduzierungen sind die einzige Möglichkeit, den Status in Redux zu ändern. Dies ist der einzige Ort, an dem Sie Logik und Berechnungen schreiben können. Die Reduzierungsfunktion akzeptiert den vorherigen Status der ausgelösten App und Aktion, berechnet den nächsten Status und gibt das neue Objekt zurück.

Die folgenden paar Dinge sollten niemals im Reduzierstück ausgeführt werden -

  • Mutation von Funktionsargumenten
  • API-Aufrufe und Routing-Logik
  • Aufrufen einer nicht reinen Funktion, z. B. Math.random ()

Das Folgende ist die Syntax eines Reduzierers -

(state,action) => newState

Fahren wir mit dem Beispiel fort, in dem die Liste der Produktelemente auf einer Webseite angezeigt wird, die im Modul "Aktionsersteller" erläutert wird. Lassen Sie uns unten sehen, wie man seinen Reduzierer schreibt.

const initialState = {
   isLoading: false,
   items: []
};
const reducer = (state = initialState, action) => {
   switch (action.type) {
      case 'ITEMS_REQUEST':
         return Object.assign({}, state, {
            isLoading: action.payload.isLoading
         })
      case ‘ITEMS_REQUEST_SUCCESS':
         return Object.assign({}, state, {
            items: state.items.concat(action.items),
            isLoading: action.isLoading
         })
      default:
         return state;
   }
}
export default reducer;

Erstens, wenn Sie den Status nicht auf 'initialState' setzen, ruft Redux den Reduzierer mit dem undefinierten Status auf. In diesem Codebeispiel wird die Funktion concat () von JavaScript in 'ITEMS_REQUEST_SUCCESS' verwendet, wodurch das vorhandene Array nicht geändert wird. Gibt stattdessen ein neues Array zurück.

Auf diese Weise können Sie eine Mutation des Zustands vermeiden. Schreiben Sie niemals direkt an den Staat. In 'ITEMS_REQUEST' müssen wir den Statuswert der empfangenen Aktion festlegen.

Es wurde bereits diskutiert, dass wir unsere Logik in Reduzierer schreiben und sie auf der Basis logischer Daten aufteilen können. Lassen Sie uns sehen, wie wir Reduzierer aufteilen und als Wurzelreduzierer kombinieren können, wenn wir mit einer großen Anwendung arbeiten.

Angenommen, wir möchten eine Webseite entwerfen, auf der ein Benutzer auf den Status der Produktbestellung zugreifen und Informationen zur Wunschliste anzeigen kann. Wir können die Logik in verschiedenen Reduzierungsdateien trennen und sie unabhängig voneinander arbeiten lassen. Nehmen wir an, dass die Aktion GET_ORDER_STATUS ausgelöst wird, um den Status der Bestellung abzurufen, der einer Bestell- und Benutzer-ID entspricht.

/reducer/orderStatusReducer.js
import { GET_ORDER_STATUS } from ‘../constants/appConstant’;
export default function (state = {} , action) {
   switch(action.type) {
      case GET_ORDER_STATUS:
         return { ...state, orderStatusData: action.payload.orderStatus };
      default:
         return state;
   }
}

In ähnlicher Weise wird angenommen, dass die Aktion GET_WISHLIST_ITEMS ausgelöst wird, um die Wunschliste des Benutzers eines Benutzers abzurufen.

/reducer/getWishlistDataReducer.js
import { GET_WISHLIST_ITEMS } from ‘../constants/appConstant’;
export default function (state = {}, action) {
   switch(action.type) {
      case GET_WISHLIST_ITEMS:
         return { ...state, wishlistData: action.payload.wishlistData };
      default:
         return state;
   }
}

Jetzt können wir beide Reduzierungen mit dem Dienstprogramm Redux combinReducers kombinieren. Die kombinierenReduzierer generieren eine Funktion, die ein Objekt zurückgibt, dessen Werte unterschiedliche Reduziererfunktionen sind. Sie können alle Reduzierungen in die Indexreduzierungsdatei importieren und sie als Objekt mit ihren jeweiligen Namen kombinieren.

/reducer/index.js
import { combineReducers } from ‘redux’;
import OrderStatusReducer from ‘./orderStatusReducer’;
import GetWishlistDataReducer from ‘./getWishlistDataReducer’;

const rootReducer = combineReducers ({
   orderStatusReducer: OrderStatusReducer,
   getWishlistDataReducer: GetWishlistDataReducer
});
export default rootReducer;

Jetzt können Sie diesen rootReducer wie folgt an die createStore-Methode übergeben:

const store = createStore(rootReducer);