Teoria

Reducers são funções puras que especificam como o estado deve mudar em resposta às ações despachadas. Ao receber o estado atual e uma ação como parâmetros, os reducers retornam o novo estado da aplicação.

Prática

Na pasta reducers do projeto, está o arquivo counterReducer.js, onde é definido o reducer para a funcionalidade do contador:

import { createReducer } from "@reduxjs/toolkit";
import { increment, decrement } from "../actions/counterAction.js";

const initialState = 0;

const counterReducer = createReducer(initialState,
  (builder) => {
    builder
      .addCase(increment, (state) => state + 1)
      .addCase(decrement, (state) => state - 1);
});

export default counterReducer;

Explicação do código:

• Linha 1: Importa a função createReducer do pacote @reduxjs/toolkit. Esta função é utilizada para criar reducers no Redux;
• Linha 2: Importa os criadores de ação increment e decrement do arquivo ../actions/counterAction.js. Estes criadores de ação são usados para definir as ações que o reducer irá tratar;
• Linha 4: Define a constante initialState como 0. Isto representa o valor inicial do contador no store do Redux;
• Linha 6: Utiliza a função createReducer para definir o counterReducer;
• Linhas 6-11: A função createReducer recebe dois argumentos: o initialState e uma função de callback que define como o estado deve ser atualizado com base nas ações despachadas;
• Linha 7: Utiliza o objeto builder para definir os casos para diferentes ações dentro da função de callback;
• Linhas 9, 10: Utiliza o método addCase do objeto builder para definir como o estado deve ser atualizado quando ações específicas, como increment e decrement, são despachadas;
• Linhas 9, 10: A função de callback dentro de addCase recebe o estado atual (state) como argumento e retorna o novo estado após aplicar a ação correspondente;
• Neste caso, quando a ação increment é despachada, o estado é incrementado em 1; quando a ação decrement é despachada, o estado é decrementado em 1;
• Linha 13: Por fim, exporta o counterReducer como exportação padrão do módulo.

Nota

Em resumo, o counterReducer irá tratar as ações despachadas e atualizar o estado do contador conforme necessário no store do Redux.