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:
GlobalStateContext
, donde se pueden almacenar datos del estado global.GlobalDispatchContext
, la funcióndispatch
, 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:
- El método
restore
es el que se utiliza para crear su tienda Redux con un reductor, un estado inicial y cualquier middleware. - El método
freeze
le permite congelar su backend de gestión de estado para integrarlo a la página de HTML. - El método
extraGetPropsArgs
permite arrojar cualquier argumento adicional que quiera incorporar a los métodosgetProps
de toda la aplicación. En este caso, la tienda Redux puede ser arrojada como un argumento adicional. - 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.