Teoria

No Redux, o store atua como a única fonte de verdade para o estado de uma aplicação. Ele contém toda a árvore de estado e é imutável. Para modificar o estado, é necessário despachar ações. Utilizando as funções e hooks do Redux Toolkit, é possível acessar e modificar o store de forma simples.

Prática

O arquivo store.js foi criado na pasta redux. Agora estamos prontos para configurar todo o store. Veja um exemplo de como isso pode ser feito:

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./reducers/counterReducer";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Explicação do código: Este código configura o store do Redux utilizando a função configureStore fornecida pelo pacote @reduxjs/toolkit. Vamos detalhar passo a passo.

• Linha 1: O código importa a função configureStore do pacote @reduxjs/toolkit. Esta função simplifica o processo de criação do store Redux, fornecendo padrões sensatos e middleware embutido;
• Linha 2 importa o counterReducer do arquivo ./reducers/counterReducer. Esta função reducer gerencia as alterações de estado para o slice "counter" do store Redux. A lógica dentro desse arquivo será criada posteriormente;
• Linhas 4-8: A função configureStore é chamada com um objeto como argumento. Este objeto especifica as opções de configuração do store. Neste caso, a opção reducer é a única opção (Linha 5);
  • A opção reducer é um objeto que mapeia os slices de estado para suas respectivas funções reducer. Neste caso, o slice counter do estado é mapeado para a função counterReducer;
  • A função configureStore retorna um objeto store Redux que contém o estado da aplicação e fornece métodos para interagir com ele.
• Linha 10: Por fim, o objeto store é exportado como exportação padrão deste módulo para que possa ser utilizado em outras partes da aplicação.

Nota

Em resumo, este código configura uma store Redux com um único slice "counter" do estado, utilizando o counterReducer para gerenciar as alterações de estado. A store resultante é então exportada para uso em outras partes da aplicação.