Teoría

En Redux, el store actúa como la única fuente de verdad para el estado de una aplicación. Contiene el árbol de estado completo y es inmutable. Para modificar el estado, se deben enviar acciones. Utilizando las funciones y hooks de Redux Toolkit, se puede acceder y modificar el store fácilmente.

Práctica

Hemos creado el archivo store.js en la carpeta redux. Estamos listos para configurar todo el store. Aquí tienes un ejemplo de cómo se puede hacer:

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

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

export default store;

Explicación del código: Este código configura el store de Redux utilizando la función configureStore proporcionada por el paquete @reduxjs/toolkit. Analicémoslo paso a paso.

• Línea 1: El código importa la función configureStore del paquete @reduxjs/toolkit. Esta función simplifica el proceso de creación de un store de Redux proporcionando valores predeterminados adecuados y middleware incorporado;
• Línea 2 importa el counterReducer del archivo ./reducers/counterReducer. Esta función reducer gestiona los cambios de estado para el slice "counter" del store de Redux. La lógica dentro de ese archivo se creará más adelante;
• Líneas 4-8: Se llama a la función configureStore con un objeto como argumento. Este objeto especifica las opciones de configuración del store. En este caso, la opción reducer es la única opción (Línea 5);
  • La opción reducer es un objeto que asigna los slices del estado a sus funciones reducer correspondientes. En este caso, el slice counter del estado se asigna a la función counterReducer;
  • La función configureStore devuelve un objeto store de Redux que contiene el estado de la aplicación y proporciona métodos para interactuar con él.
• Línea 10: Finalmente, el objeto store se exporta como exportación por defecto de este módulo para que pueda ser utilizado en otras partes de la aplicación.

Nota

En resumen, este código configura una tienda de Redux con una única porción "counter" del estado, utilizando el counterReducer para manejar los cambios de estado. La tienda resultante se exporta para su uso en otras partes de la aplicación.