Gestión de estado

Algunas aplicaciones de escaparate exigen una forma específica de gestionar el estado global. Existen muchas bibliotecas de gestión de estado que pueden ayudarle a hacerlo, como Redux y MobX. Salesforce no avala ninguna biblioteca de gestión de estado en particular sobre ninguna otra, y es posible crear una aplicación de PWA Kit sin usar ninguna.

Siempre puede proporcionar información de estado a sus componentes mediante props, pero si desea utilizar las características más avanzadas de React para gestionar el estado, esta guía también cubre otros enfoques.

La técnica más sencilla para compartir el estado entre componentes es proporcionar dicha información de estado a un componente mediante props. El componente debe ser superior a todos los demás componentes que necesiten acceder a la información de estado. Los documentos de React describen esta técnica en detalle y la llaman levantamiento del estado.

La Context API de React simplifica el proceso de hacer que la información esté disponible para un gran número de componentes, sin tener que pasar esos datos por props manualmente en cada nivel del árbol de componentes de la aplicación.

Este es un ejemplo de cómo se puede utilizar la Context API de React con un componente que actúa de contenedor de todos los demás para proporcionarles datos de estado compartidos.

Comience creando un componente llamado GlobalState que tiene dos objetos de contexto:

  1. GlobalStateContext, donde se pueden almacenar datos del estado global.
  2. GlobalDispatchContext, la función dispatch, que arroja una captura actualizada del estado global a través de una función de reducción.

Cada objeto de contexto viene con un componente <Provider> que permite a los componentes consumidores suscribirse a los cambios de contexto. Aquí, los objetos de contexto se inicializan con las props initialState y dispatch. Estas props se obtienen al conectar el estado con un reducer, mediante un enlace useReducer. Para obtener más información sobre los enlaces de React, incluido cómo utilizarlos con la Context API, consulte la documentación de referencia oficial de enlaces de React.

A continuación encontrará la forma de definir e inicializar un componente que utilice la Context API para almacenar el estado global en su aplicación de escaparate:

El componente especial AppConfig que está en app/components/_app-config/index.jsx es desde donde se puede iniciar el sistema de gestión de estado. Aquí, props.children contiene todos los componentes de la aplicación, así que aquí es donde se debe agregar el componente GlobalState.

Para obtener el objeto “props” es necesario iniciarlo primero. Utilice el enlace useReducer de React para crear un estado conectado al reductor. La función useReducer toma un objeto initialState y el reducer importado desde el componente GlobalState. A continuación, pasa el estado conectado y una función dispatch para modificar dicho estado.

Por ejemplo:

Ahora puede dar a cualquier componente acceso a sus datos de contexto global, incluida la capacidad de actualizarlos. Importe GlobalStateContext y GlobalDispatchContext del componente GlobalState y proporcione esos objetos de contexto al método useContext().

Por ejemplo:

Puede personalizar su aplicación para que use una biblioteca de gestión de estado anulando el componente especial predeterminado AppConfig ubicado en app/components/_app-config/index.jsx.

A continuación encontrará una explicación sobre cómo configurar Redux para su PWA mediante AppConfig dentro. El componente tiene cuatro métodos que debe utilizar:

  1. El método restore es el que se utiliza para crear su tienda Redux con un reductor, un estado inicial y cualquier middleware.
  2. El método freeze le permite congelar su backend de gestión de estado para integrarlo a la página de HTML.
  3. El método extraGetPropsArgs permite arrojar cualquier argumento adicional que quiera incorporar a los métodos getProps de toda la aplicación. En este caso, la tienda Redux puede ser arrojada como un argumento adicional.
  4. El método render permite configurar proveedores de contexto para una biblioteca de gestión de estado. Por ejemplo, se puede usar para encapsular la aplicación en un proveedor Redux.

A continuación encontrará un breve ejemplo que muestra cómo utilizar los métodos de AppConfig para configurar Redux para su aplicación de escaparate. Además de los pasos indicados aquí, para conseguir una solución completa debe crear su tienda con un reductor, un estado inicial y cualquier middleware requerido.