Zustandsverwaltung

Für einige Storefront-Anwendungen muss es die Möglichkeit geben, den allgemeinen Zustand zu verwalten. Für diesen Zweck gibt es eine ganze Reihe von Zustandsverwaltungsbibliotheken wie beispielsweise Redux und MobX. Salesforce empfiehlt keine bestimmte Zustandsverwaltungsbibliothek und zieht keine einer anderen gegenüber vor. Sie können eine PWA Kit App sogar ganz ohne eine derartige Bibliothek erstellen.

Sie können Zustandsinformationen jederzeit mithilfe von Props an Ihre Komponenten weitergeben, aber wenn Sie die erweiterten Funktionalitäten von React für die Zustandsverwaltung nutzen möchten, finden Sie in dieser Anleitung auch Informationen zu anderen Ansätzen.

Am einfachsten lassen sich Zustandsinformationen mit Komponenten teilen, indem Sie diese Informationen einer Komponente mithilfe von Props bereitstellen. Diese Komponente muss allen Komponenten übergeordnet sein, die Zugriff auf die Zustandsdaten benötigen. In den React-Docs ist diese Methode – auch "lifting state up" (Zustand anheben) genannt – ausführlich beschrieben.

Die Context API von React vereinfacht den Prozess der Datenbereitstellung für eine große Anzahl von Komponenten, da Sie diese Daten nicht mehr auf jeder Ebene des Komponentenbaums Ihrer Anwendung manuell über Props weitergeben müssen.

Hier ist ein Beispiel der Anwendung der React Context API auf eine Komponente, die als Wrapper den gekapselten Komponenten die freigegebenen Daten bereitstellt.

Erstellen Sie zuerst eine Komponente namens GlobalState, die zwei Kontextobjekte besitzt:

  1. GlobalStateContext: Speicherort Ihrer allgemeinen Zustandsdaten.
  2. GlobalDispatchContext: Ihre dispatch-Funktion, die über eine Reduzierer-Funktion einen aktuellen Snapshot des allgemeinen Zustands zurückgibt.

Jedes Kontextobjekt verfügt über eine <Provider>-Komponente, die es verbrauchenden Komponenten erlaubt, Meldungen zu Kontextänderungen zu abonnieren. Hier werden die Kontextobjekte mit den Props initialState und dispatch initialisiert. Sie erhalten diese Props, wenn Sie Ihren Zustand unter Verwendung des Hooks useReducer mit einem reducer verbinden. Weitere Informationen zu React Hooks, z. B. wie man diese mit der Context API anwendet, finden Sie in der offiziellen Referenzdokumentation zu React Hooks.

So definieren und initialisieren Sie eine Komponente, die unter Verwendung der Context API den allgemeinen Zustand in Ihrer Storefront-App speichert:

In der Sonderkomponente AppConfig in app/components/_app-config/index.jsx können Sie Ihr Zustandsverwaltungssystem initialisieren. Da props.children alle Komponenten Ihrer App enthält, fügen Sie die Komponente GlobalState ebenfalls hier hinzu.

Um das Props-Objekt zu erhalten, müssen Sie es zuerst initialisieren. Erstellen Sie mit dem React Hook useReducer einen mit Ihrem Reduzierer verbundenen Zustand. Die Funktion useReducer übernimmt ein initialState-Objekt und den aus der GlobalState-Komponente importierten reducer. Übergeben Sie anschließend den verbundenen Zustand und eine dispatch-Funktion, um diesen Zustand zu ändern.

Beispiel:

Jetzt können Sie jeder Komponente Zugriff auf Ihre allgemeinen Kontextdaten gestatten. Dies schließt ebenfalls die Fähigkeit ein, diese Daten zu aktualisieren. Importieren Sie GlobalStateContext und GlobalDispatchContext aus Ihrer GlobalState-Komponente und stellen Sie diese Kontextobjekte der Methode useContext() bereit.

Beispiel:

Sie können Ihre Anwendung für die Nutzung einer Zustandsverwaltungsbibliothek anpassen, indem Sie die Standard-Sonderkomponente AppConfig in app/components/_app-config/index.jsx überschreiben.

Im Folgenden wird beschrieben, wie Sie Redux in AppConfig für Ihre PWA einrichten. Die Komponente verfügt über vier Methoden, die Sie anwenden müssen:

  1. In der restore-Methode erstellen Sie Ihren Redux-Speicher mit einem Reduzierer, Ausgangszustand und etwaiger Middleware.
  2. Die freeze-Methode ermöglicht es Ihnen, das Backend Ihrer Zustandsverwaltung "einzufrieren", um es in die Seiten-HTML einzubetten.
  3. Mit der extraGetPropsArgs-Methode können Sie alle zusätzlichen Argumente zurückgeben, die Sie anwendungsweit in getProps-Methoden injizieren wollen. In unserem Fall können wir den Redux-Speicher als ein zusätzliches Argument zurückgeben.
  4. Die render-Methode ermöglicht es Ihnen, Kontextanbieter für eine Zustandsverwaltungsbibliothek einzurichten. So können Sie mit dieser Methode beispielsweise die App in einem Redux-Anbieter kapseln.

Hier ist ein kurzes Beispiel für die Verwendung der Methoden von AppConfig bei der Einrichtung von Redux für Ihre Storefront-App. Zusätzlich zu den hier gezeigten Schritten müssen Sie für eine komplette Lösung Ihre Storefront mit einem Reduzierer, einem Ausgangszustand und der eventuell erforderlichen Middleware erstellen.