Gerenciamento do estado

Alguns aplicativos da loja (virtual) requerem uma forma de gerenciar o estado global. Há muitas bibliotecas de gerenciamento de estado disponíveis que podem ajudá-lo com isso, como Redux e MobX. A Salesforce não endossa nenhuma biblioteca de gerenciamento de estado em especial, e você pode criar um aplicativo PWA Kit sem nem mesmo ter que usar uma.

Você sempre pode fornecer informações de estado a seus componentes via props, mas caso queira usar os recursos mais avançados do React para gerenciar o estado, este guia abrange outros enfoques também.

A técnica mais simples de compartilhar estado entre os componentes é proporcionar as informações de estado a um componente via props. Esse componente deve ser superior a todos os demais componentes que precisam acessar os dados de estado. Os documentos do React descrevem essa técnica em detalhes e a denomina Elevando o State.

A React Context API simplifica o processo de disponibilização de dados a um número maior de componentes, sem ter que transmitir os dados de maneira manual através de props em cada nível da árvore de componentes de seu aplicativo.

Veja aqui um exemplo de como você pode usar a React Context API com um componente que atua como um wrapper de todos os seus componentes para disponibilizar a eles dados de estado compartilhados.

Comece criando um componente denominado GlobalState, que tem dois objetos de contexto:

  1. GlobalStateContext: onde você pode armazenar dados de estado globais.
  2. GlobalDispatchContext: sua função dispatch, que retorna um snapshot atualizado do estado global através de um função redutora.

Cada objeto de contexto vem com um componente <Provider> que permite o cadastro de componentes de consumo a mudanças de contexto. Aqui, os objetos de contexto são inicializados com os props initialState e dispatch. Esses props são obtidos quando você conecta seu estado com um reducer, usando o HookuseReducer. Para obter mais informações sobre React Hooks, inclusive como usá-los com a Context API, consulte a documentação de referência sobre React Hooks oficial.

Veja aqui como você definiria e iniciaria um componente que usa a Context API para armazenar o estado global no aplicativo da sua loja (virtual):

O componente AppConfig especial localizado em app/components/_app-config/index.jsx é onde você pode inicializar seu sistema de gerenciamento de estado. Aqui, props.children contém todos os componentes de seu aplicativo, logo é onde você adicionaria o seu componente GlobalState.

Para obter o objeto props, você precisa inicializá-lo primeiro. Use o React Hook useReducer para criar um estado conectado ao seu reducer. A função useReducer assimila um objeto initialState e o reducer importado do componente GlobalState. Em seguida, transmita o estado conectado e uma função dispatch para modificar aquele estado.

Por exemplo:

Agora você pode conceder a qualquer componente acesso a seus dados de contexto globais, incluindo a capacidade de atualizá-los. Importe GlobalStateContext e GlobalDispatchContext de seu componente GlobalState e transmita esses objetos de contexto ao método useContext().

Por exemplo:

Você pode personalizar seu aplicativo para usar uma biblioteca de gerenciamento de estado ao substituir o componente padrão especial AppConfig localizado em app/components/_app-config/index.jsx.

Veja aqui como configurar o Redux para seu PWA de dentro de AppConfig. O componente tem quatro métodos que você precisa usar:

  1. O método restore é usado para criar sua loja Redux com reducer, estado inicial e qualquer middleware.
  2. O método freeze permite que você conserve o back-end do seu gerenciamento de estado para integrá-lo ao HTML da página.
  3. O método extraGetPropsArgs é usado para retornar qualquer argumento extra que você gostaria de injetar nos métodos getProps em todo o aplicativo. Neste caso, podemos retornar o Redux store como um argumento adicional.
  4. O método render permite que você configure os fornecedores de contexto para uma biblioteca de gerenciamento de estado. Por exemplo, você pode usá-lo para envolver o aplicativo em um elemento Redux Provider.

Veja aqui um pequeno exemplo que mostra como usar os métodos de AppConfig para configurar o Redux para o aplicativo da sua loja (virtual). Além das etapas mostradas aqui, uma solução completa exige que você crie sua loja com um reducer, um estado inicial e qualquer middleware necessário.