O gerenciamento de estado está no centro dos aplicativos da Web modernos, desempenhando um papel vital no gerenciamento dos dados dos usuários e na captura de suas interações. Seja preenchendo um carrinho de compras em uma plataforma de comércio eletrônico ou mantendo uma sessão de usuário logado após a autenticação, essas ações são possíveis por meio de um gerenciamento de estado eficiente.

Essencialmente, os gerentes de estado permitem que os aplicativos acessem e processem os dados para produzir os resultados desejados. O Next.js fornece suporte para várias soluções de gerenciamento de estado. No entanto, neste guia, focaremos na utilização do Redux Toolkit para gerenciamento de estado.

Em aplicativos Next.js, o gerenciamento de estado normalmente envolve dois tipos de estados: estado global e estado de componente. O estado global contém informações compartilhadas por todos os componentes do aplicativo, como o status de autenticação de um usuário, enquanto o estado do componente armazena dados específicos de componentes individuais.

Os estados global e de componente desempenham papéis vitais no gerenciamento do estado geral do aplicativo, facilitando a manipulação eficiente dos dados.

O Redux é amplamente adotado como uma solução de gerenciamento de estado em vários frameworks JavaScript. No entanto, pode apresentar complexidades, principalmente para projetos menores.

Uma desvantagem comum é a necessidade de escrever código clichê repetitivo para definir tipos de ação, criadores de ação e redutores. Isso pode levar a uma maior redundância de código.

Para superar esses desafios, kit de ferramentas redux (RTK) vem para o resgate. Visa principalmente agilizar a experiência de desenvolvimento ao trabalhar com o Biblioteca de gerenciamento de estado do Redux. Ele fornece um conjunto de ferramentas e utilitários que simplificam as tarefas comuns do Redux, eliminando a necessidade de código clichê excessivo.

Agora, vamos nos aprofundar no uso do Redux Toolkit para gerenciar o estado em aplicativos Next.js. Para começar, crie um projeto Next.js e instale as dependências necessárias seguindo as etapas abaixo.

1. Crie um novo projeto Next.js localmente executando o comando abaixo em seu terminal:

   npx create-next-app@latest next-redux-toolkit

2. Depois de criar o projeto, navegue até o diretório do projeto executando:

   cd next-redux-toolkit

3. Por fim, instale as dependências necessárias em seu projeto usando npm, o gerenciador de pacotes Node.

   npm install @reduxjs/toolkit react-redux

Depois de configurar um projeto Next.js básico, você está pronto para criar um aplicativo Next.js de demonstração que utiliza o Redux Toolkit para gerenciamento de estado.

Você pode encontrar o código deste projeto neste Repositório GitHub.

Configurar a Loja Redux

Um armazenamento Redux é um contêiner central que contém todo o estado do aplicativo. Ele serve como fonte única dos dados do aplicativo, fornecendo estados para cada componente. A loja é responsável por gerenciar e atualizar o estado por meio de ações e redutores, facilitando o gerenciamento de estado em todo o aplicativo.

Para construir uma loja Redux, crie um novo Restaurado pasta no diretório raiz do seu projeto Next.js. Dentro desta pasta, crie um novo loja.js arquivo e adicione o seguinte código:

importar {configureStore} de'@reduxjs/toolkit';
importar profileReducer de'./redutores/profileSlice';
exportarpadrão configureStore({
 redutor:{
 perfil: profileReducer
 }
})

O código acima utiliza configureStore função para criar e configurar a loja Redux. A configuração da loja inclui a especificação de redutores usando o redutor objeto.

Os redutores, neste caso, especificam como o estado do aplicativo deve mudar em resposta a ações específicas ou eventos especificados. Neste exemplo, o perfil O redutor é responsável por gerenciar as ações relacionadas ao estado do perfil.

Ao configurar o armazenamento Redux, o código estabelece a estrutura principal para gerenciar o estado do aplicativo usando o Redux Toolkit.

Definir fatias de estado

As fatias de estado Redux são componentes que encapsulam a lógica para gerenciar o estado de itens de dados específicos dentro do armazenamento redux configurado. Essas fatias são criadas usando o criarSlice função, que gera automaticamente o redutor, criadores de ação e tipos de ação para a fatia.

No Restaurado diretório, crie uma nova pasta e nomeie-a redutores. Dentro desta pasta, crie profileSlice.js arquivo e adicione o código a seguir.

importar {criar fatia} de'@reduxjs/toolkit';
const perfilSlice = criarSlice({
 nome: 'perfil',
 Estado inicial: {
 nome: 'nenhum'
 },
 redutores: {
 NOME DO CONJUNTO: (estado, ação) => {
 state.name = action.payload
 }
}})
exportarconst {SET_NAME} = perfilSlice.actions;
exportarpadrão profileSlice.reducer;

No código fornecido, o criarSlice A função cria uma fatia de estado para o estado do perfil do usuário. O fatia de perfil objeto inclui o nome da fatia e sua Estado inicial, que contém os valores padrão para as propriedades de estado.

Além disso, o objeto de fatia também recebe uma redutores propriedade que define os manipuladores de ação para esta fatia. Nesse caso, uma única função redutora chamada NOME DO CONJUNTO. Essencialmente, assim que você chamar essa função, ela atualizará a propriedade name do estado com os dados fornecidos.

O criarSlice A função gera criadores de ação e tipos de ação automaticamente com base nos redutores definidos. O exportado NOME DO CONJUNTO criador de ação e profileSlice.reducer representa o criador da ação gerada e a função redutora para a fatia do perfil.

Ao criar essa fatia de estado, os componentes do aplicativo podem utilizar o NOME DO CONJUNTO action e passe o payload desejado para atualizar o nome do perfil no estado.

Crie um componente para testar a funcionalidade de gerenciamento de estado do RTK

Abra o index.js arquivo no Páginas diretório, exclua o código padrão Next.js e adicione o código a seguir.

importar estilos de'@/styles/Home.module.css'
importar {useRef} de'reagir'
importar {useSelector, useDispatch} de'reagir-redux'
importar {NOME DO CONJUNTO} de'../../redux/reducers/profileSlice'
funçãoNome de exibição(){
const {nome} = useSeletor((estado) => estado.perfil)
retornar (

 Eu sou {nome} !!</h1> 
 ) }
exportarpadrãofunçãoLar() {
const inputName = useRef()
const dispatch = useDispatch()
funçãoenviarNome() {
console.log (inputName.current.value)
 dispatch (SET_NAME(inputName.current.value))
 }
retornar (
 <>

'insira o nome' ref={inputName} />
Digite o nome</button>

 </main>
 </>
 )}

O código acima cria e renderiza um componente Next.js que permite ao usuário inserir um nome e exibir o nome fornecido na página do navegador. Efetivamente, gerenciando o estado do aplicativo usando o Redux Toolkit.

O Nome de exibição componente utiliza o useSelector gancho para acessar o nome propriedade do estado do perfil na loja Redux e a renderiza na página.

Para inserir um nome, o usuário clica no botão Insira o nome botão. Isso invoca o enviarNome função, que despacha o NOME DO CONJUNTO ação com o valor de entrada como a carga útil. Esta ação atualiza a propriedade de nome no estado do perfil.

Atualize o arquivo _app.js

Por fim, para configurar o Redux Toolkit para uso em todo o aplicativo Next.js, você precisa agrupar o aplicativo com o Provedor Redux - isso garante que o armazenamento Redux e os estados disponíveis sejam acessíveis a todos os componentes no aplicativo.

Abra o _app.js arquivo e atualize-o da seguinte maneira:

importar {Fornecedor} de'reagir-redux'
importar loja de'../../redux/store'
exportarpadrãofunçãoAplicativo({ Componente, pageProps }) {
retornar (


 </Provedor> )
}

Agora, vá em frente e inicie o servidor de desenvolvimento para refletir as alterações feitas e navegue até http://localhost: 3000 em seu navegador para testar o aplicativo.

npm run dev

Lidando com a reidratação de dados no recarregamento da página

A reidratação de dados no recarregamento da página refere-se ao processo de restauração e inicialização do estado do aplicativo quando uma página é recarregada. Em um aplicativo Next.js renderizado pelo servidor, o estado inicial é primeiro renderizado no servidor e, em seguida, enviado ao cliente.

No cliente, o código JavaScript é responsável por reconstruir o estado do aplicativo recuperando e desserializando o estado serializado recebido do servidor.

Ao fazer isso, o aplicativo pode restaurar perfeitamente os dados necessários e preservar a sessão do usuário. Essa abordagem evita a busca desnecessária de dados e garante uma experiência de usuário ininterrupta ao navegar entre as páginas ou recarregar o aplicativo.

Uma das vantagens de usar o Redux Toolkit em aplicativos Next.js é sua simplicidade e recursos amigáveis ​​ao desenvolvedor. Ele reduz significativamente o código clichê necessário para definir ações, redutores e configuração de armazenamento, tornando mais fácil e eficiente trabalhar com o Redux no gerenciamento de estado.