Redux Toolkit

Redux Toolkit es un set de herramientas que permite desarrollar con Redux reduciendo sensiblemente la cantidad de código necesario para trabajar y eliminando la necesidad de lidiar de manera natural con algunos aspectos del patrón implementado por Redux como la inmutabilidad del estado.

Si al construir aplicaciones de Redux necesitábamos hacer numerosas tareas como definir los action creators, los reducers, aplicar middlewares y muchas otras tareas medianamente complejas y bastante laboriosas, con Redux Toolkit nos las dan “regaladas”.

En resumen, Redux Toolkit nos ahorra tener que desarrollar manualmente las partes más complejas y tediosas del trabajo con Redux como:

• Crear los action creators
• Lidiar con la inmutabilidad de los objetos del estado en los reducers
• Registrar el middleware Redux Thunk para trabajo con procesos asíncronos
• Activar las herramientas de desarrollo de Redux
• Combinar los reducer

Además de estas tareas permite algunas cuestiones adicionales que aportan ventajas extra que, si no son necesarias en todas las aplicaciones, sí pueden resultar útiles, como gestión a alto nivel con APIs, optimización, etc.

Para poder empezar a desarrollar una aplicación con Redux y Redux Toolkit simplemente necesitamos instalar la librería vía npm o cualquier otro gestor de dependencias de Node.

npm install @reduxjs/toolkit

Obviamente necesitarías haber iniciado tu proyecto con npm para que se almacene la dependencia en tu package.json.

Posteriormente dispones de todas las herramientas necesarias, incluido el propio Redux, por lo que no necesitas instalarlo aparte.

Para trabajar con Redux Toolkit necesitamos cambiar un poco la manera típica de desarrollar en Redux. Anteriormente lo que tenías que hacer era crear un conjunto de acciones que servían para seleccionar procesos de un reducer. Incluso, para facilitar la creación de los objetos que especifican las acciones los desarrolladores tenían que hacer unas funciones llamadas "action creators" que básicamente devuelven los objetos ya compuestos de las acciones que se deseaban ejecutar. Posteriormente tenías que componer el reducer, lidiando a mano con todo lo que es la inmutabilidad del estado.

La primera ventaja que tenemos ahora con Redux Toolkit es eliminar la mayoría de este laborioso trabajo manual. Para poder llevar a cabo todo lo que son las acciones, action creators y reducers nosotros simplemente vamos a necesitar crear un "slice", que viene a significar una "porción" del estado. Al crear el slice indicaremos de una vez el estado inicial y las distintas funciones de manipulación del estado y gracias a Redux Toolkit se generará todo lo demás: acciones y reducer.

Slice o porción es un término que tiene sentido si pensamos que generalmente en las aplicaciones el estado se compone de diversas partes, por ejemplo, la que se dedica a la gestión del usuario, la que se dedica a mostrar enlaces de feedback, la que se dedica a trabajar con una u otra entidad, etc. Uniendo las distintas porciones tenemos el estado completo.

Estas son las bases del trabajo que cambiando con respecto al modo de uso clásico de Redux. De todos modos, Redux Toolkit ofrece diversas herramientas adicionales que nos aportan ventajas extra como por ejemplo para la gestiónn de procesos asíncronos o el trabajo centralizado con APIs de servicios web.

Un slice de ejemplo, en el que estaríamos controlando el estado de login de un usuario y sus datos personales, tiene una pinta como esta:

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

export const userSlice = createSlice({
  name: 'user',
  initialState: {
    loggedIn: false,
    user: null,
  },
  reducers: {
    loggedIn: (state, action) => {
      console.log(state, action);
      state.loggedIn = true;
      state.user = action.payload;
    },
    loggedOut: state => {
      state.loggedIn = false;
      state.user = null;
    },
  }
});

export const { loggedIn, loggedOut } = userSlice.actions;

Este módulo estaría exportando varios objetos:

• Por un lado el propio slice llamado userSlice
• Por otro lado exporta todas las acciones que se generan automáticamente gracias a las funciones de especificadas para el reducer, en este caso loggedIn y loggedOut

Redux Toolkit nos ofrece también mecanismos para generar el Store usando los distintos slices que nuestra aplicación necesite. En lugar de combinar a mano los reducer, podemos indicar en un objeto sencillo cuáles son los que deben participar en el Store.

Mediante un código como este podemos componer el Store a base de distintos reducer.

import { configureStore } from '@reduxjs/toolkit';
import { userSlice } from './user-slice';
import { appSlice } from './app-slice';
import { countrySlice } from './country-slice';

export const store = configureStore({
  reducer: {
    app: appSlice.reducer,
    user: userSlice.reducer,
    country: countrySlice.reducer,
  }
});

En el código anterior podemos ver cómo se combinaron distintos reducer generados a base de varios slice para crear un único store. El estado generado también reunirá todos los datos de los distintos slices.

Ahora vamos a ver un módulo de javascript que es capaz de usar Redux por medio de los artefactos generados anteriormente, en los que nos hemos apoyado en Redux Toolkit. Como verás, en lo que respecta al uso de Redux no hay diferencias por mucho que hayamos incorporado Redux Toolkit.

Primero Tendremos que importar el Store y las acciones que queramos usar del archivo slice que las haya definido.

import { loggedIn, loggedOut } from './redux/user-slice';
import { store } from './redux/store';

Luego podremos acceder al estado de la manera habitual, mediante el objeto store.

let state = store.getState();

Luego podremos invocar las acciones del slice mediante el método dispatch() del store, igual a como ya hacíamos anteriormente con Redux:

store.dispatch(loggedIn('miguel'))
store.dispatch(loggedOut())

Para suscribirnos a los cambios en el estado, usaremos el método suscribe() ya existente en Redux anteriormente.

store.subscribe(function() {
  let state = store.getState();
  processLoggedState(state);
});