Um guia para gerenciamento de estado em Next.js usando o Redux Toolkit

A gestão de estados é um aspeto crucial das aplicações Web contemporâneas, uma vez que permite o tratamento eficaz dos dados dos utilizadores e o acompanhamento das suas interacções. Isto inclui a adição de artigos a um cesto de compras virtual numa loja em linha ou a preservação da sessão autenticada de um utilizador. A execução sem problemas de tais operações é atribuível a uma gestão de estados competente.

Os gerenciadores de estado são fundamentais para permitir que os aplicativos recuperem e manipulem dados a fim de gerar os resultados desejados. Felizmente, o Next.js oferece uma variedade de opções para o gerenciamento de estados, incluindo o Redux Toolkit, que será o foco principal deste guia.

Gerenciamento de estado no Next.js usando o Redux Toolkit

estado global e estado local. O estado global diz respeito a informações que são comuns a todos os componentes de um aplicativo, por exemplo, o status autenticado de um usuário, enquanto o estado local diz respeito a dados exclusivos de componentes individuais.

O funcionamento correto de uma aplicação depende frequentemente da gestão eficaz dos seus estados global e local, permitindo um processamento simplificado da informação.

O Redux ganhou aceitação generalizada como uma ferramenta para gerenciar estados de aplicativos em vários frameworks JavaScript. No entanto, a sua adoção pode colocar desafios, especialmente para projectos de menor escala.

Uma desvantagem recorrente é a necessidade de compor um código de caldeirão detalhado para especificar categorias de ações, geradores de ações e redutores, resultando em uma maior duplicação de código.

Para superar esses desafios, o Redux Toolkit (RTK) vem em socorro. O seu principal objetivo é simplificar a experiência de desenvolvimento quando se trabalha com a biblioteca de gestão de estados

Redux

. Ele fornece um conjunto de ferramentas e utilitários que simplificam as tarefas comuns do Redux, eliminando a necessidade de código boilerplate excessivo.

Introdução ao Redux Toolkit em aplicações Next.js

Posso ajudá-lo a reformular o conteúdo fornecido numa linguagem mais eloquente?

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

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

⭐ Após criar o projeto, navegue até o diretório do projeto executando:

 cd next-redux-toolkit 

⭐ Por fim, instale as dependências necessárias em seu projeto usando

npm, o gerenciador de pacotes do Node

.

 npm install @reduxjs/toolkit react-redux 

Após a criação de um projeto Next.js fundamental, está pronto o palco para construir uma aplicação Next.js demonstrativa que utiliza o Redux Toolkit para a governação do Estado.

O código-fonte do projeto supramencionado pode ser acedido através do repositório GitHub supramencionado.

Configurar o Redux Store

Um Redux store é um repositório central que engloba o estado completo de uma aplicação. Essa unidade de armazenamento atua como o principal fornecedor de informações para todos os componentes do programa. A sua função consiste em supervisionar e regular o estado através de operações e redutores, garantindo assim uma gestão eficiente do estado em toda a aplicação.

Para construir um repositório Redux em um projeto Next.js, é necessário

 import {configureStore} from '@reduxjs/toolkit';
import profileReducer from './reducers/profileSlice';
export default configureStore({
    reducer:{
        profile: profileReducer
    }
})
 

O código acima emprega a função configureStore para estabelecer e personalizar o repositório Redux. Este processo envolve a especificação da lógica de redução através do objeto reducer .

O objetivo de um redutor, como demonstrado aqui, é ditar a maneira pela qual o estado de um aplicativo deve ser modificado com base em ações específicas ou ocorrências designadas. Especificamente, o redutor de perfil tem a tarefa de supervisionar as operações relativas ao estado do perfil.

Através da implementação de uma loja Redux, o código cria a estrutura fundamental necessária para gerir o estado da aplicação utilizando o Redux Toolkit.

Definir fatias de estado

Uma fatia de estado do Redux é um componente que engloba o raciocínio necessário para manter o status de determinados elementos de dados em um repositório Redux específico. Essas fatias são desenvolvidas por meio da utilização do

No diretório do Redux, crie uma nova subpasta chamada “reducers”. Dentro desta subpasta, por favor, crie um novo ficheiro chamado “profileSlice.js”, e depois cole nele o seguinte conteúdo.

 import {createSlice} from '@reduxjs/toolkit';
const profileSlice = createSlice({
    name: 'profile',
    initialState: {
        name: 'none'
    },
    reducers: {
        SET_NAME: (state, action) => {
            state.name = action.payload
        }
}})

export const {SET_NAME} = profileSlice.actions;
export default profileSlice.reducer; 

O código dado implementa um componente funcional que gera uma fatia para gerir o estado de um perfil de utilizador. Especificamente, define uma única função denominada createSlice , que estabelece uma estrutura de dados conhecida como “fatia” para encapsular o estado do perfil do utilizador. Esta fatia é então configurada com um conjunto inicial de valores através da sua propriedade initialState , que serve de ponto de partida para quaisquer actualizações ou modificações subsequentes do estado do perfil de utilizador.

O objeto de fatia aceita uma propriedade reducers, que especifica os manipuladores de acções para esta fatia em particular.Neste caso, foi implementada uma única função redutora denominada SET\_NAME. Por conseguinte, quando esta função é invocada, actualiza a propriedade name do estado com as informações fornecidas.

A função createSlice é capaz de gerar criadores de acções e tipos de acções automáticos através da utilização de redutores previamente definidos. O criador de acções exportado SET\_NAME e o redutor profileSlice.reducer representam o criador de acções criado automaticamente e a função de redução correspondente para a fatia profile .

Através da implementação deste fragmento de estado, é possível que as partes constituintes da aplicação utilizem a

Criar um componente para testar a funcionalidade de gestão de estados do RTK

Abra o ficheiro “index.js” localizado no diretório “pages” e remova o código predefinido fornecido pelo Next.js. Em seguida, insira o seguinte código:

 import styles from '@/styles/Home.module.css'
import {useRef} from 'react'
import {useSelector, useDispatch} from 'react-redux'
import {SET_NAME} from '../../redux/reducers/profileSlice'

function DisplayName(){
  const {name} = useSelector((state) => state.profile)
  return (
    <h1> I am {name} !!</h1>
   ) }

export default function Home() {
const inputName = useRef()
const dispatch = useDispatch()
 function submitName() {
   console.log(inputName.current.value)
   dispatch(SET_NAME(inputName.current.value))
  }
  return (
    <>
      <main className={styles.main}>
         <input placeholder='enter name' ref={inputName} />
        <button onClick={submitName}>Enter name</button>
        <DisplayName />
      </main>
    </>
  )} 

O código acima mencionado gera e apresenta um componente Web numa aplicação Next.js que permite ao utilizador introduzir o seu nome e vê-lo renderizado na página do browser. Isto é conseguido utilizando o Redux Toolkit para gerir o estado da aplicação.

O componente DisplayName foi concebido para recuperar o valor da propriedade name do estado do perfil no repositório Redux, utilizando o gancho useSelector, que é depois apresentado na página Web.

Ao clicar no botão “Introduzir nome”, o utilizador inicia a apresentação do seu nome, activando a função “submitName”. Esta operação desencadeia a ação “SET\_NAME”, em que a entrada fornecida é utilizada como carga útil da mensagem para atualizar o aspeto “name” no estado de coisas “profile” do indivíduo.

Atualizar o arquivo _app.js

Para integrar o kit de ferramentas Redux em um aplicativo Next.js, é necessário incluir todo o aplicativo no provedor Redux, permitindo assim a acessibilidade do armazenamento Redux e seus estados associados a todos os componentes do aplicativo.

 import {Provider} from 'react-redux'
import store from '../../redux/store'
export default function App({ Component, pageProps }) {
  return (
    <Provider store={store}>
       <Component {...pageProps} />
    </Provider> )
} 

Comece por iniciar o servidor de desenvolvimento para incorporar as alterações e direccione o seu navegador Web para http://localhost:3000 para testar a aplicação.

 npm run dev 

Manuseamento da re-hidratação de dados no recarregamento da página

Após o refrescamento da página Web, a hidratação de dados refere-se ao procedimento de renovação e inicialização do estado da aplicação. No que diz respeito a uma plataforma Next.js renderizada do lado do servidor, o estado preliminar é inicialmente gerado pelo servidor e, subsequentemente, entregue ao utilizador.

O código JavaScript no dispositivo cliente tem a tarefa de restaurar o estado da aplicação, obtendo e desserializando os dados serializados transmitidos pelo servidor.

Através desta metodologia, o programa é capaz de recuperar e manter sem esforço as informações necessárias, preservando a sessão do utilizador. Essa técnica minimiza a recuperação excessiva de dados e garante uma experiência contínua para o usuário ao fazer a transição entre páginas ou atualizar

Trabalhando com o Redux Toolkit em aplicativos Next.js

O Redux Toolkit oferece vários benefícios quando utilizado em um aplicativo Next.js, principalmente em termos de facilidade de uso e facilidade de desenvolvimento. O kit de ferramentas simplifica o processo de criação de acções, reduzindo a funcionalidade e configurando a loja, resultando em menos código boilerplate e maior eficiência na gestão do estado.