DEV Community: ᒍᗩᑕE

Construyendo tu Reino con Redux Toolkit: Una Guía Completa

ᒍᗩᑕE — Mon, 09 Oct 2023 22:32:22 +0000

Imagina que estás construyendo un gran reino en una vasta tierra. Este reino es tu aplicación de React, y dentro de este reino, hay diversas partes, cada una con sus propias responsabilidades y recursos. Para mantener el orden y tomar decisiones para todo el reino, necesitas un consejo central que gestione la información y los comandos.

Así es como Redux Toolkit entra en juego como el "Consejo Central" de tu reino:

El Rey (Redux Toolkit):

En nuestro reino, Redux Toolkit es como el rey sabio y justo. Sirve como la autoridad central para gestionar y almacenar la información importante (estado) que tu reino (aplicación de React) necesita para funcionar.

Los Consejeros (Reducers):

El rey no gestiona todo solo; tiene un consejo de consejeros (reducers). Cada consejero es responsable de una área específica del reino, como el tesoro, el ejército o la agricultura. De manera similar, en Redux Toolkit, los reducers son responsables de manejar diferentes partes del estado de tu aplicación.

const treasuryReducer = (state, action) => { /* ... */ };
const armyReducer = (state, action) => { /* ... */ };
const agricultureReducer = (state, action) => { /* ... */ };

Los Mensajeros (actions):

Los consejeros no pueden tomar decisiones por sí solos; dependen de los mensajeros (actions) para transmitir mensajes de diferentes partes del reino al consejo. En Redux Toolkit, las acciones son como mensajeros que llevan información y solicitudes para cambiar el estado.

const increaseGold = (amount) => ({ 
type: 'INCREASE_GOLD', payload: amount });

El Pergamino de Leyes (Store):

Para mantener toda la información importante en un solo lugar, el consejo mantiene un gran pergamino (store). Este pergamino contiene registros de todas las decisiones pasadas e información necesaria para gobernar el reino. En Redux Toolkit, el store contiene el estado actual y todas las acciones que se han despachado.

Las Reuniones del Consejo (Middleware):

Durante las reuniones del consejo (middleware), los consejeros y los mensajeros pueden proponer nuevas leyes (funciones middleware). Estas leyes pueden verificar, modificar o incluso rechazar los cambios propuestos para el reino. Por ejemplo, puedes tener middleware para registrar acciones, manejar tareas asíncronas o hacer cumplir ciertas reglas. Las funciones middleware en Redux son funciones que interceptan y procesan acciones antes de que lleguen a los reducers.

El Escriba (createSlice):

Para simplificar el proceso de crear consejeros (reducers), tienes un hábil escriba (createSlice). El escriba puede redactar informes de consejeros (reducers) con menos esfuerzo, ya que entiende muy bien la estructura de estos informes. Esto se asemeja al uso de createSlice de Redux Toolkit para crear reducers de manera más eficiente.

Los Heraldos (Selectors):

En tu reino, los heraldos (selectors) son responsables de entregar mensajes importantes a los ciudadanos (componentes). Pueden acceder a la información del gran pergamino (store) y compartirla con los habitantes de la ciudad. Los selectores ayudan a los componentes a recuperar y mostrar el estado del store.

La Tesorería (Actualizaciones Inmutables):

La tesorería (actualizaciones inmutables) asegura que cuando se realicen cambios en el oro (estado), se registren cuidadosamente y se preserven las reservas originales de oro. Esto es similar al principio de inmutabilidad en Redux Toolkit, donde los cambios de estado resultan en una nueva copia del estado para mantener el historial de cambios.

¡Construyamos un reino juntos!

Ahora que hemos explorado el papel de Redux Toolkit en la gestión de tu reino, pongámoslo en práctica con un ejemplo sencillo. Administraremos la tesorería del reino como punto de partida.

Estructura de Carpetas:

- src
  - store
    - treasurySlice.js
  - components
    - Treasury.js
  - App.js

Paso 1: Configurar Redux Toolkit

Primero, debes configurar Redux Toolkit en tu aplicación. Asegúrate de tener Redux y Redux Toolkit instalados:

pnpm install @reduxjs/toolkit react-redux

Paso 2: Definir la logica de la Tesorería (Treasury Slice)

¿Recuerdas cómo comparamos los reducers de Redux Toolkit con consejeros responsables de tareas específicas?

Ahora crearemos un consejero de tesorería usando createSlice de Redux Toolkit. Aquí definiremos nuestros reducers y actions que relacionamos con mensajeros.

// src/store/treasurySlice.js
import { createSlice } from '@reduxjs/toolkit';

const treasurySlice = createSlice({
  name: 'treasury',
  initialState: { gold: 1000 }, // Initial state

  reducers: {
    increaseGold: (state, action) => {
      state.gold += action.payload;
    },
    decreaseGold: (state, action) => {
      state.gold -= action.payload;
    },
  },
});

export const { increaseGold, decreaseGold } = treasurySlice.actions;
export default treasurySlice.reducer;

Paso 3: Configurar la Tienda (Store)

En la misma carpeta donde se encuentra treasurySlice.js, crea un archivo llamado store.js para configurar tu tienda Redux. Aquí configuraremos nuestra tienda Redux para gestionar las decisiones de nuestro consejero de tesorería:

// src/store/store.js
import { configureStore } from '@reduxjs/toolkit';
import treasuryReducer from './treasurySlice';

const store = configureStore({
  reducer: {
    treasury: treasuryReducer, // Add your reducer here
  },
});

export default store;

Paso 4: Crear Componentes

Ahora, creemos un componente para interactuar con la tesorería. Crea un archivo Treasury.js en la carpeta components, aquí encontraremos los selectores, que son funciones que permiten a los componentes recuperar piezas específicas del estado desde la tienda (store):

// src/components/Treasury.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increaseGold, decreaseGold } from '../store/treasurySlice';

function Treasury() {
  const gold = useSelector((state) => state.treasury.gold);
  const dispatch = useDispatch();

  const handleIncreaseGold = () => {
    dispatch(increaseGold(100));
  };

  const handleDecreaseGold = () => {
    dispatch(decreaseGold(50));
  };

  return (
    <div>
      <h2>Treasury</h2>
      <p>Gold: {gold}</p>
      <button onClick={handleIncreaseGold}>Increase Gold</button>
      <button onClick={handleDecreaseGold}>Decrease Gold</button>
    </div>
  );
}

export default Treasury;

Paso 5: Usa el componente Tesorería en App.js

Basándonos en la estructura del consejo, ahora incluimos el componente Treasury en nuestro archivo App.js:

// src/App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store/store';
import Treasury from './components/Treasury';

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <h1>Kingdom Management</h1>
        <Treasury />
      </div>
    </Provider>
  );
}

export default App;

Paso 6: Ejecuta tu aplicación

Con todo configurado, puedes ejecutar tu aplicación React, y tendrás un componente Tesorería que puede aumentar y disminuir el oro del reino, administrado por Redux Toolkit.

Este es un ejemplo simplificado, pero demuestra la estructura y buenas prácticas de Redux Toolkit para gestionar el estado dentro de tu aplicación React.

Expandiendo tu reino: gestionando múltiples estados

Ahora, vamos a expandir nuestra aplicación de gestión del reino para incluir estados adicionales. En este ejemplo ampliado, gestionaremos no sólo la tesorería sino también la población y la fuerza militar del reino. También demostraremos cómo manejar múltiples slices usando Redux Toolkit.

Estructura de carpetas:

- src
  - store
    - treasurySlice.js
    - populationSlice.js
    - militarySlice.js
    - store.js
  - components
    - Treasury.js
    - Population.js
    - Military.js
  - App.js

Paso 1: Define slices adicionales

Crea slices para la población y el ejército en archivos separados, similares al archivo treasurySlice.js. Por ejemplo:

// src/store/populationSlice.js
import { createSlice } from '@reduxjs/toolkit';

const populationSlice = createSlice({
  name: 'population',
  initialState: { count: 1000 },
  reducers: {
    increasePopulation: (state, action) => {
      state.count += action.payload;
    },
    decreasePopulation: (state, action) => {
      state.count -= action.payload;
    },
  },
});

export const { increasePopulation, decreasePopulation } = populationSlice.actions;
export default populationSlice.reducer;

// src/store/militarySlice.js
import { createSlice } from '@reduxjs/toolkit';

const militarySlice = createSlice({
  name: 'military',
  initialState: { strength: 500 },
  reducers: {
    increaseMilitaryStrength: (state, action) => {
      state.strength += action.payload;
    },
    decreaseMilitaryStrength: (state, action) => {
      state.strength -= action.payload;
    },
  },
});

export const { increaseMilitaryStrength, decreaseMilitaryStrength } = militarySlice.actions;
export default militarySlice.reducer;

Paso 2: Configura el store con múltiples slices

Actualiza el archivo store.js para incluir todos los slices:

// src/store/store.js
import { configureStore } from '@reduxjs/toolkit';
import treasuryReducer from './treasurySlice';
import populationReducer from './populationSlice';
import militaryReducer from './militarySlice';

const store = configureStore({
  reducer: {
    treasury: treasuryReducer,
    population: populationReducer,
    military: militaryReducer,
  },
});

export default store;

Paso 3: Crea componentes adicionales

Crea componentes para la gestión de la población y el ejército, similares al componente Treasury.js. Por ejemplo, Population.js y Military.js.

Paso 4: Usa los nuevos componentes en App.js

En tu archivo App.js, incluye los nuevos componentes junto con el componente Treasury para gestionar todos los aspectos de tu reino:

Paso 5: Ejecuta tu aplicación extendida

Ahora, cuando ejecutes tu aplicación, tendrás componentes para gestionar la tesorería, la población y la fuerza militar de tu reino, usando Redux Toolkit para la gestión del estado. Puedes ampliar este concepto para gestionar más aspectos de tu reino o aplicación según sea necesario.

Siguiendo este patrón, puedes gestionar eficazmente múltiples slices de estado en tu aplicación React usando Redux Toolkit mientras mantienes tu código organizado y mantenible.

¿Pero necesito crear un slice para cada nuevo estado?

Puedes gestionar múltiples piezas de estado dentro de un solo slice si están relacionadas y pertenecen al mismo dominio de tu aplicación. Redux Toolkit’s createSlice te permite definir múltiples piezas de estado dentro de un solo slice, lo que facilita organizar los datos relacionados.

Por ejemplo, puedes tener un solo slice que gestione tanto la tesorería como los diferentes tipos de fuerza militar:

// src/store/kingdomSlice.js
import { createSlice } from '@reduxjs/toolkit';

const kingdomSlice = createSlice({
  name: 'kingdom',
  initialState: {
    treasury: {
      gold: 1000,
      silver: 500,
      bronze: 300,
    },
    military: {
      chivalry: 100,
      lance: 400,
      archers: 300,
    },
  },
  reducers: {
    // Treasury-related actions
    increaseGold: (state, action) => {
      state.treasury.gold += action.payload;
    },
    decreaseGold: (state, action) => {
      state.treasury.gold -= action.payload;
    },
    // Military-related actions
    increaseChivalry: (state, action) => {
      state.military.chivalry += action.payload;
    },
    decreaseChivalry: (state, action) => {
      state.military.chivalry -= action.payload;
    },
    // Add more actions for other aspects of the kingdom
  },
});

export const {
  increaseGold,
  decreaseGold,
  increaseChivalry,
  decreaseChivalry,
} = kingdomSlice.actions;
export default kingdomSlice.reducer;

En este ejemplo, tenemos un solo slice kingdom que gestiona tanto el estado relacionado con la tesorería como con el ejército. Cada parte del estado se organiza dentro del objeto de estado kingdom. Puedes definir acciones separadas para cada aspecto del reino (tesorería, ejército, etc.) y actualizarlos independientemente.

Al usar un solo slice para el estado relacionado, mantienes el código organizado y mantenible. Sin embargo, es esencial encontrar un equilibrio entre la granularidad y la organización. Si encuentras que tu aplicación se vuelve demasiado compleja o que diferentes partes del estado no pertenecen lógicamente juntas, podría tener sentido crear slices separados para una mejor separación de responsabilidades.

React with vite + jest

ᒍᗩᑕE — Wed, 19 Apr 2023 20:55:06 +0000

¡Hola! En este tutorial te mostraré cómo usar React con Vite y Jest. Usaremos pnpm como gestor de paquetes. Para empezar, asumiré que ya has creado un proyecto básico de React con Vite y que has instalado todas las dependencias necesarias.

pnpm create vite

Para este ejemplo usaremos React + typescript

Para este tutorial me "guie" 🤣 por este otro está en inglés, la razón por la que quise contribuir con una nueva versión es que ya ha habido algunos cambios en Jest por lo que todo lo que encuentren allí no funcionará 100%. Aunque allí está mejor explicado todo por alguien si sabe lo que hace ❤️.

Paso 1: Instalar Jest

Primero, debes instalar Jest como una dependencia de desarrollo en tu proyecto. Para hacer esto, abre una terminal en la raíz de tu proyecto y ejecuta el siguiente comando:

pnpm install --save-dev jest @types/jest jest-environment-jsdom jest-watch-typeahead @testing-library/dom @testing-library/jest-dom @testing-library/react @testing-library/user-event @swc/jest @types/testing-library__jest-dom

Paso 2: Configurar Jest

Ahora, necesitas configurar Jest en tu proyecto. Crea un archivo llamado jest.config.cjs en la raíz de tu proyecto y pega el siguiente código:

module.exports = {
  roots: ["<rootDir>/src"],
  collectCoverageFrom: [
    "src/**/*.{js,jsx,ts,tsx}",
    "!src/**/*.d.ts",
    "!src/mocks/**",
  ],
  coveragePathIgnorePatterns: [],
  setupFilesAfterEnv: ["./config/jest/setupTests.js"],
  testEnvironment: "jsdom",
  modulePaths: ["<rootDir>/src"],
  transform: {
    "^.+\\.(ts|js|tsx|jsx)$": "@swc/jest",
    "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
    "^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":
      "<rootDir>/config/jest/fileTransform.js",
  },
  transformIgnorePatterns: [
    "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs|cjs|ts|tsx)$",
    "^.+\\.module\\.(css|sass|scss)$",
  ],
  moduleNameMapper: {
    "^react-native$": "react-native-web",
    "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
    "^.+\\.(svg)$": "<rootDir>/src/__mocks__/fileMock.js",
  },
  moduleFileExtensions: [
    // Place tsx and ts to beginning as suggestion from Jest team
    // https://jestjs.io/docs/configuration#modulefileextensions-arraystring
    "tsx",
    "ts",
    "web.js",
    "js",
    "web.ts",
    "web.tsx",
    "json",
    "web.jsx",
    "jsx",
    "node",
  ],
  watchPlugins: [
    "jest-watch-typeahead/filename",
    "jest-watch-typeahead/testname",
  ],
  resetMocks: true,
};

Paso 3: Archivos adicionales

Crea un archivo en /src/__tests__/App.test.tsx con el siguiente contenido:

import { render, screen } from "@testing-library/react";
import App from "../App";

describe("App", () => {
  it("should work as expected", () => {
    render(<App />);
    expect(1 + 1).toBe(2);
  });
});

Crea un archivo en /src/__mocks__/fileMock.js con el siguiente contenido:

module.exports = "";

Esto es necesario porque Jest no puede entender cómo manejar las importaciones de archivos que no son de JS (en este caso, archivos SVG), por lo que el módulo fileTransform.js intercepta estas importaciones y devuelve el nombre de archivo del recurso. Sin esta transformación, Jest no sería capaz de ejecutar el conjunto de pruebas, ya que fallaría al resolver las importaciones de archivos que no son de JS.

Crea en la raíz del proyecto las siguientes carpetas /config/jest con los siguientes archivos: cssTransform.js, fileTransform.js, setupTests.js

//cssTransform.js
"use strict";

module.exports = {
  process(src, filename, config, options) {
    return {
      code: "module.exports = {};",
    };
  },
  getCacheKey() {
    return "cssTransform";
  },
};

//fileTransform.js
"use strict";

const path = require("path");
const camelcase = require("camelcase");
module.exports = {
  process(src, filename) {
    const assetFilename = JSON.stringify(path.basename(filename));

    if (filename.match(/\.svg$/)) {
      // Based on how SVGR generates a component name:
      // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
      const pascalCaseFilename = camelcase(path.parse(filename).name, {
        pascalCase: true,
      });
      const componentName = `Svg${pascalCaseFilename}`;
      const svgComponentCode = `const React = require('react');
      module.exports = {
        __esModule: true,
        default: ${assetFilename},
        ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
          return {
            $$typeof: Symbol.for('react.element'),
            type: 'svg',
            ref: ref,
            key: null,
            props: Object.assign({}, props, {
              children: ${assetFilename}
            })
          };
        }),
      };`;
      return { code: svgComponentCode };
    }

    const fileModuleCode = `module.exports = ${assetFilename};`;
    return { code: fileModuleCode };
  },
};

//setupTests.js
import "@testing-library/jest-dom/extend-expect";

window.matchMedia = (query) => ({
  matches: false,
  media: query,
  onchange: null,
  addEventListener: jest.fn(),
  removeEventListener: jest.fn(),
  dispatchEvent: jest.fn(),
  addListener: jest.fn(),
  removeListener: jest.fn(),
});

Object.defineProperty(URL, "createObjectURL", {
  writable: true,
  value: jest.fn(),
});

Crea en la raíz del proyecto un archivo llamado .swcrc con lo siguiente:

{
  "jsc": {
    "target": "es2017",
    "parser": {
      "syntax": "typescript",
      "tsx": true,
      "decorators": false,
      "dynamicImport": false
    },
    "transform": {
      "react": {
        "pragma": "React.createElement",
        "pragmaFrag": "React.Fragment",
        "throwIfNamespace": true,
        "development": false,
        "useBuiltins": false,
        "runtime": "automatic"
      },
      "hidden": {
        "jest": true
      }
    }
  },
  "module": {
    "type": "commonjs",
    "strict": false,
    "strictMode": true,
    "lazy": false,
    "noInterop": false
  }
}

swcrc es un archivo de configuración para el compilador de JavaScript swc. swc es un compilador de JavaScript/TypeScript extremadamente rápido que se utiliza para transpilar y optimizar el código fuente de una aplicación.

Paso 4: Edita package.json

"type": "commonjs",
  "scripts": {
    //...
    "test": "jest"
  },

Eso sería todo, nótese que tuve que cambiar module por commonjs aun así la app corre normalmente.
Por último, si desean contribuir para mejorar o mantener esta guia actualizada, pueden hacerlo desde aquí.