Neste artigo, exploraremos como Zustand permite a substituição de estado com a função setState, focando em um recurso interessante: substituir o estado sem mesclar. Explicaremos como usá-lo com um caso de teste simples.

Compreendendo a fusão de estados versus substituição de estados

Antes de analisar o código, é importante entender a diferença entre mesclar e substituir estado.

• Mesclando Estado: Por padrão, quando você atualiza o estado no Zustand (ou React), ele mescla o novo estado com o estado existente. Apenas os campos atualizados são alterados, enquanto o restante do estado permanece intacto.

• Substituindo estado: Em contraste, substituir o estado substitui o estado inteiro por um novo objeto, descartando quaisquer campos que estavam presentes no estado anterior, mas não fazem parte do novo estado.

Quando substituir o estado

Existem situações em que é necessária a substituição de todo o estado, por exemplo:

• Redefinindo estado após o envio de um formulário.

• Substituindo totalmente o estado ao carregar um conjunto de dados diferente.

Caso de teste para substituir o estado Zustand

Aqui está um caso de teste simples da base de código do Zustand que demonstra como substituir o estado usando a função setState:

it('can set the store without merging', () => {
  const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

  // Should override the state instead of merging.
  setState({ b: 2 }, true)
  expect(getState()).toEqual({ b: 2 })
})

Detalhando o teste

1. Criando a Loja Primeiro, uma loja Zustand é criada com um estado inicial:

const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

O estado inicial é um objeto com uma única propriedade definida como 1. A função create retorna dois métodos essenciais:

• setState: Este método é usado para atualizar o estado da loja.

• getState: Este método recupera o estado atual da loja.

2. Substituindo o estado A operação principal aqui é substituir o estado atual, { a: 1 }, por um estado completamente novo:

setState({ b: 2 }, true)

• Ao passar o sinalizador true como segundo argumento, Zustand sabe que deve substituir o estado, em vez de mesclar o novo objeto { b: 2 } com o existente. Isso substitui completamente o estado anterior, então { a: 1 } é removido e o novo estado se torna { b: 2 }.

3. Validando a substituição do estado Finalmente, o teste garante que o estado foi totalmente substituído:

expect(getState()).toEqual({ b: 2 })

A expectativa é que após chamar setState({ b: 2 }, true), o estado da loja contenha apenas { b: 2 } e não contenha mais { a: 1 }.

Como Zustand substitui o estado

A imagem abaixo é do código-fonte do Zustand que define o estado.

Como você pode ver, se o sinalizador de substituição existir, nextState se tornará o novo estado.

(replace ?? (typeof nextState !== 'object' || nextState === null))

Esta é uma maneira inteligente, se replace for falso, o que é por padrão, (typeof nextState !== ‘object’ || nextState === null)) a condição é verificada.

Conclusão

Zustand oferece uma maneira direta de gerenciar o estado no React, e a capacidade de substituir o estado completamente usando setState com o sinalizador de substituição fornece flexibilidade adicional. Se você deseja redefinir um formulário, carregar novos dados ou limpar valores antigos, esse recurso permite controlar totalmente como o estado é gerenciado e atualizado em seu aplicativo.

Sobre nós:

No Think Throo, temos a missão de ensinar os conceitos avançados de arquitetura de base de código usados ​​em projetos de código aberto.

10x suas habilidades de codificação praticando conceitos de arquitetura avançados em Next.js/React, aprenda as melhores práticas e crie projetos de nível de produção.

Somos de código aberto - https://github.com/thinkthroo/thinkthroo (Dê-nos uma estrela!)

Aprimore sua equipe com nossos cursos avançados baseados na arquitetura de base de código. Entre em contato conosco em [email protected] para saber mais!

Referências:

1. https://github.com/pmndrs/zustand/blob/v4.5.5/tests/basic.test.tsx#L471C13-L471C50

2. https://github.com/pmndrs/zustand/tree/v4.5.5?tab=readme-ov-file#overwriting-state