Gestione dello stato

Alcune applicazioni storefront richiedono un modo per gestire lo stato globale. Esistono molte librerie, ad esempio Redux e MobX, che consentono di eseguire facilmente questa operazione. Salesforce non ne predilige una in particolare e permette di creare app PWA Kit anche senza utilizzarle.

È sempre possibile fornire ai componenti informazioni sullo stato tramite prop. Tuttavia, se si desidera gestire lo stato utilizzando le funzionalità più avanzate di React, consultare questa guida per scoprire approcci alternativi.

La tecnica più semplice per condividere le informazioni sullo stato tra componenti è fornirle a uno di essi tramite prop. Deve trattarsi di un componente di livello superiore rispetto a tutti i componenti che richiedono l'accesso a tali dati. La documentazione di React descrive questa tecnica nel dettaglio e la definisce lifting state up (spostamento in alto dello stato).

Context API di React consente di rendere facilmente disponibili i dati a un numero elevato di componenti senza doverli trasferire manualmente tramite le prop a ogni livello dell'albero componenti dell'app.

Ecco un esempio di utilizzo di React Context API con un componente che funge da wrapper di tutti i componenti per fornire loro i dati sullo stato condivisi.

Iniziare creando un componente denominato GlobalState con due oggetti context:

  1. GlobalStateContext: oggetto in cui è possibile memorizzare i dati sullo stato globali.
  2. GlobalDispatchContext: la funzione dispatch, che restituisce uno snapshot aggiornato dello stato globale attraverso una funzione reducer.

Ogni oggetto context presenta un componente <Provider> che consente l'utilizzo di componenti per sottoscrivere le modifiche context. Qui gli oggetti context vengono inizializzati con le prop initialState e dispatch. Queste prop si ottengono collegando lo stato con un reducer mediante l'hook useReducer. Per ulteriori informazioni sugli hook React, incluso l'utilizzo con Context API, vedere la documentazione di riferimento sugli hook React ufficiale.

Ecco in che modo definire e inizializzare un componente che utilizza Context API per memorizzare lo stato globale nell'app dello storefront:

Nel componente speciale AppConfig situato in app/components/_app-config/index.jsx è possibile inizializzare il sistema di gestione dello stato. Qui props.children contiene tutti i componenti dell'app ed è il punto in cui aggiungere il componente GlobalState.

Per ottenere l'oggetto props, è necessario prima inizializzarlo. Utilizzare l'hook React useReducer per creare uno stato collegato al reducer. La funzione useReducer accetta un oggetto initialState e il reducer importato dal componente GlobalState. Successivamente, trasmettere lo stato connesso e una funzione dispatch per modificarlo.

Ad esempio:

A questo punto è possibile concedere a qualsiasi componente l'accesso ai dati di contesto globali, inclusa la possibilità di aggiornarli. Importare GlobalStateContext e GlobalDispatchContext dal componente GlobalState e fornire tali oggetti context al metodo useContext().

Ad esempio:

È possibile personalizzare l'applicazione in modo da utilizzare una libreria di gestione dello stato sostituendo il componente speciale AppConfig predefinito situato in app/components/_app-config/index.jsx.

Ecco come impostare Redux per una PWA all'interno di AppConfig. Il componente presenta quattro metodi che devono essere utilizzati:

  1. Il metodo restore, con cui creare lo store Redux con un reducer, uno stato iniziale e qualsiasi middleware.
  2. Il metodo freeze, che consente di congelare il back-end di gestione dello stato per incorporarlo nell'HTML della pagina.
  3. Il metodo extraGetPropsArgs, con cui restituire qualsiasi argomento supplementare che si desidera inserire nei metodi getProps nell'intera app. In questo caso, è possibile restituire lo store Redux come argomento supplementare.
  4. Il metodo render consente di impostare provider di contesto per una libreria di gestione dello stato. Ad esempio, è possibile utilizzarlo per eseguire il wrapping dell'app in un provider Redux.

Ecco un breve esempio che dimostra come utilizzare i metodi di AppConfig per impostare Redux per l'app dello storefront. Oltre ai passaggi descritti, una soluzione completa richiede la creazione dello store con un reducer, uno stato iniziale e qualsiasi middleware obbligatorio.