Guía de Redux Toolkit: Simplifica tu Manejo de Estado en React

Redux es una herramienta popular para la gestión de estado en el ecosistema React. Sin embargo, su uso tradicional a menudo se considera verboso y complejo debido a los numerosos pasos necesarios para crear un almacén (store), la creación de múltiples archivos con código repetitivo y la falta de una convención clara para escribir la lógica. Redux Toolkit surge para abordar estos problemas. Desarrollado por el propio equipo de ReduxJS, Redux Toolkit permite escribir código Redux de forma rápida, completa y siguiendo un estándar unificado.

Redux Toolkit no solo simplifica la creación de almacenes, sino que también integra algunos middlewares y Redux Devtool para depurar y monitorizar el proceso de actualización del estado. Esto ahorra tiempo y esfuerzo a los desarrolladores.

Declarar el tipo de acción (action type) en Redux tradicional es bastante tedioso, y este valor solo se utiliza al crear la acción y en el reductor. Redux Toolkit proporciona la función createAction para crear acciones de forma más concisa. Esta función recibe una cadena y devuelve una función que crea una acción con el tipo que se le pasó como argumento.

import { createAction } from '@reduxjs/toolkit';
const increment = createAction('INCREMENT');
console.log(increment()); // {type: "INCREMENT"}

Además, createAction permite acceder al tipo de la acción fácilmente, lo que ahorra aún más código:

console.log(increment.toString()); // "INCREMENT"
console.log(increment.type); // "INCREMENT"

Redux Toolkit también proporciona la función createReducer para crear reductores de una manera más simple e intuitiva que el método tradicional. createReducer permite inicializar un reductor con una lógica intuitiva como un objeto de referencia, donde cada clave es un tipo y el valor es una función reductora.

import { createReducer } from '@reduxjs/toolkit'
const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

const initialState = {
  count: 0
}

const counterReducer = createReducer(initialState, {
  [increment]: (state) => ({ count: state.count + 1 }),
  [decrement]: (state) => ({ count: state.count - 1 })
})

createReducer recibe dos parámetros: el valor inicial del estado y el objeto que permite al reductor escuchar y actualizar el estado. Basándonos en la propiedad calculada de ES6, podemos reescribir el código anterior de forma más concisa:

const counterReducer = createReducer(initialState, {
  [increment]: (state) => ({ count: state.count + 1 }),
  [decrement]: (state ) => ({ count: state.count - 1 })
})

Gracias a createAction y createReducer, la creación de almacenes en Redux Toolkit se vuelve mucho más simple y comprensible que en Redux tradicional. El código está organizado de forma clara, es legible y fácil de mantener. Redux Toolkit simplifica la gestión del estado en las aplicaciones React, permitiendo a los desarrolladores centrarse en la lógica de negocio en lugar del código repetitivo.

// store.js
import { configureStore, createAction, createReducer } from '@reduxjs/toolkit';

// actions
const increment = createAction('increment')
const decrement = createAction('decrement')

const initialState = {
  count: 0
}

const rootReducer = createReducer(initialState, {
  [increment]: (state) => ({count: state.count + 1}),
  [decrement]: (state) =>  ({count: state.count - 1})
})


const store = configureStore({
  reducer: rootReducer
})

export default store