Neste artigo, entenderemos como Object.assign() é usado no código-fonte do Zustand.

O trecho de código acima é de vanilla.ts, quando você define um estado, Object.assign é usado para atualizar seu objeto de estado.

Vamos primeiro entender o básico de Object.assign:

Object.assign()

O método estático Object.assign() copia todas as propriedades próprias enumeráveis ​​de um ou mais objetos de origem para um objeto de destino. Ele retorna o objeto de destino modificado.

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// Expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// Expected output: true

b no objeto de destino é substituído pelo valor b no objeto de origem.

Muito simples, certo? vamos agora realizar alguns experimentos e entender como o setState de Zustand aproveita o método Object.assign().

Object.assign() no código-fonte do Zustand:

// pulled from: https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76
state = (replace != null ? 
              replace : 
              typeof nextState !== "object" || 
              nextState === null) ? 
                nextState : 
                Object.assign({}, state, nextState);

Esse é o operador ternário aninhado no trecho de código acima. se a substituição não for nula, o estado será substituído ou se o nextState não for um objeto, apenas retorne nextState como está, mas o que nos interessa é Object.assign({}, state, newState).

Vamos primeiro registrar e ver o que está em state e nextState quando você atualiza seu estado. O exemplo que escolhi é um exemplo de demonstração no código-fonte do Zustand. Modifiquei um pouco o código para que possamos colocar algumas instruções no console e executar esses experimentos.

Neste exemplo simples, quando a contagem é incrementada, tudo se resume a atualizar o objeto de estado usando Object.assign.

Da próxima vez, você estiver tentando realizar algumas atualizações em seu objeto JSON, use Object.assign.

Sobre nós:

No Think Throo, temos a missão de ensinar as melhores práticas inspiradas 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!)

Quer criar sistemas web sob medida para o seu negócio? Contate-nos em [email protected]

Sobre o autor:

Ei, meu nome é Ram. Sou um apaixonado engenheiro de software/OSS Tinkerer.

Confira meu site: https://www.ramunarasinga.com/

Referências:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L76

2. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign