Redux Toolkit: Simplificación de Reducers y Slices

¿Cómo Simplificar el Uso de Redux con Redux Toolkit?

Aprender a manejar Redux puede ser un desafío debido a la cantidad de código boilerplate involucrado y la inclinada curva de aprendizaje al inicio. No obstante, Redux Toolkit surge como una solución efectiva para optimizar la experiencia del desarrollador, simplificando considerablemente el proceso. Con herramientas como Immer para inmutabilidad y los Slices para gestionar los reducers, Redux Toolkit se presenta como una manera más eficiente de manejar el estado en tus aplicaciones.

¿Cómo Instalar Redux Toolkit?

Para empezar a utilizar Redux Toolkit, lo primero es instalar el paquete. Puedes hacerlo utilizando npm:

npm install @reduxjs/toolkit

Una vez instalado, se recomienda crear una nueva carpeta llamada Slices o Features dentro de tu carpeta src para organizar mejor tus Slices y features. Esta separación ayuda a mantener un código más claro.

¿Qué es un Slice y Cómo Se Crea?

Un Slice en Redux Toolkit es un concepto que abstrae la creación de reducers, action types y action creators. Para crearlo, importa el método createSlice:

import { createSlice } from '@reduxjs/toolkit';

A continuación, crea una variable que exportarás, utilizando createSlice para definir nombre, estado inicial y reducers. Aquí un ejemplo de cómo crear un Slice llamado dataSlice:

const dataSlice = createSlice({
  name: 'data',
  initialState: {
    pokemons: []
  },
  reducers: {
    setPokemons(state, action) {
      state.pokemons = action.payload;
    },
    setFavorite(state, action) {
      const currentIndex = state.pokemons.findIndex(pokemon => pokemon.id === action.payload.id);
      if (currentIndex >= 0) {
        state.pokemons[currentIndex].favorite = !state.pokemons[currentIndex].favorite;
      }
    }
  }
});

export const { setPokemons, setFavorite } = dataSlice.actions;
export default dataSlice.reducer;

En el ejemplo anterior, setPokemons y setFavorite son funciones que gestionan los cambios de estado.

¿Cómo Exportar Acciones y Reducers?

Para poder usar las acciones y el reducer que has definido en tu dataSlice, deberás exportarlos al final del archivo:

export const { setPokemons, setFavorite } = dataSlice.actions;
export default dataSlice.reducer;

Esto permite que las acciones sean importadas en los componentes donde quieras interactuar con el estado global, y que el reducer se combine con otros si fuera necesario.

¿Cómo Configurar el RootReducer?

Cambia el RootReducer usando el combinarReducer del mismo Redux. Importa el reducer que has definido en el dataSlice y combínalo:

import { combineReducers } from 'redux';
import dataReducer from './slices/dataSlice';

const rootReducer = combineReducers({
  data: dataReducer,
  // otros reducers
});

export default rootReducer;

Con estos pasos, la transición a Redux Toolkit es mucho más sencilla y te permite concentrarte más en la lógica de negocio en lugar de en la infraestructura de Redux.

¿Qué Ventajas Ofrece Redux Toolkit?

• Código Reducido: Se eliminan muchas partes repetitivas de código.
• Gestión de Inmutabilidad: El uso de Immer permite gestionar cambios de estado de manera más intuitiva.
• Curva de Aprendizaje Menos Pronunciada: Facilita la comprensión y uso de Redux desde el primer momento.
• Integración de Thunks: Permite manejar asincronismo sin la necesidad de paquetes adicionales como redux-thunk.

Adoptando Redux Toolkit, optimizarás tus procesos de desarrollo, y te centrarás más en la creación de aplicaciones robustas y escalables. ¡No dudes en explorar más funcionalidades de Redux Toolkit para seguir optimizando tus proyectos!