Redux

Introducción

Redux es una librería, que nos ayuda a manejar y actualizar estado de nuestra aplicación, he implementa también el patrón Flux que nos dice como debemos tratar ese estado y sus actualizaciones.

Para usarlos se necesita:

• Dónde almacenar: Store

• Cómo acceder: Mediantes métodos, ejempo: selectores.

• Cómo actualizar: Dispachers, actions ó reducers.

Consta de tres principios:

• Única fuente de verdad (store)

• El estado es de solo lectura, no modificarlo directamente sino atraves de actions.

• Los cambios deben realizarse através de funciones puras (reducers)

La diferencia entre State y Store es que State es un objeto de tipo clave-valor (aunque puede ser de otros tipos). El Store contiene al state y a otras propiedades como los disparadores, suscribers etc..

Funciones puras

• Valor retornado cambia si la entrada cambia.

• Misma entrada, misma salida.

• Sin efectos colaterales

Reducers

• Calcular el nuevo estado basado en los parámetros (state, action).

• No modificar el estado directamente. (Inmutabilidad)

• No tener lógica asíncrona.

Ciclo de vida de Redux

Diferencias entre Redux y Context API

Depuración

• Redux tiene un depurador que nos permite llevar trazabilidad de como se ha ido comportando nuestro estado.

• Context API al tener todo en el mismo provider y no tener una descripción clara de lo que cambia se más complicado de depurar.

Bundle size

• Redux necesita de librerías o paquetes externos y requiere ser manualmente integrado para poder ser utilizado.

• Context API ya viene por defecto integrado y no necesita librerías externas para ser utilizado.

Middlewares

• Redux tiene una manera muy simple de extender funcionalidades o acciones con los Middlewares.

Curva de aprendizaje

• Redux tiene una curva de aprendizaje mas robusta y al inicio puede ser complicado, se debe saber integrar, aprender un nuevo paradigma y como fluyen los datos con Redux en la aplicación.

• Context API es fácil de aprender y mucho mas ligero.

Rendering

• Redux evita render innecesarios.

• Context API no evita estos render innecesarios, sin embargo, hay técnicas para hacerlo pero se deben hacer manualmente.

Ejemplo Básico

import * as Redux from 'https://unpkg.com/redux@latest/dist/redux.browser.mjs'

// Un reducer es una maquina de estados que recive el
// estado y la accion a realizar y devuelve un nuevo estado
function counterReducer(state, action) {
    if (typeof state === 'undefined') {
        return 0;
    }

    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}

// Se crea el store
var store = Redux.createStore(counterReducer);

function render() {
    console.log(store.getState().toString());
}

render();

// El subscriber esta escuchando nuevos cambiso al state
store.subscribe(render);

// Despachadores disparan las acciones y las mandan al reducer
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });

Ejemplo con React y Connect

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { pokemonsReducer } from './reducers/pokemons';
import { Provider } from 'react-redux';
// Cuando no usamos readux toolkit redux sugiere usar legacy_createStore
import { legacy_createStore as createStore } from 'redux';

const root = ReactDOM.createRoot(document.getElementById('root'));

const store = createStore(pokemonsReducer);

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

// App.js
import { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import PokemonList from './components/PokemonList';
import { getPokemon } from './api';
import { setPokemons as setPokemonsActions } from './actions';

function App({ pokemons, setPokemons }) {
  useEffect(() => {
    const fetchPokemons = async () => {
      const pokemonsRes = await getPokemon(); // api para obtener pokemons
      setPokemons(pokemonsRes);
    };
    fetchPokemons();
  }, []);

  return (
    <div className='App'>
      <PokemonList pokemons={pokemons} /> // Lista de pokemons
    </div>
  );
}

const mapStateToProps = (state) => ({
  pokemons: state.pokemons,
});

const mapDispatchToProps = (dispatch) => ({
  setPokemons: (value) => dispatch(setPokemonsActions(value)),
});

//  Aqui es donde se conecta con el estore de reduc
export default connect(mapStateToProps, mapDispatchToProps)(App);

// ./actions

// index.js
import { SET_POKEMONS } from './types';

export const setPokemons = (payload) => ({
  type: SET_POKEMONS,
  payload,
});

// types.js
export const SET_POKEMONS = 'SET_POKEMONS';

// reducers/pokemonsReducers.js

import { SET_POKEMONS } from '../actions/types';

const initialState = {
  pokemons: [],
};

export const pokemonsReducer = (state = initialState, action) => {
  switch (action.type) {
    case SET_POKEMONS:
      return { ...state, pokemons: action.payload };
  default:
      return state;
  }
};

Con hooks useDispatch y useSelector

Cambiamos el archivo App

// App.js
import { useEffect, useState } from 'react'
import { connect, useDispatch, useSelector } from 'react-redux'
import PokemonList from './components/PokemonList';
import { getPokemon } from './api';
import { setPokemons } from './actions';

function App() {
  const pokemons = useSelector((state)=>state.pokemons)
  const dispath = useDispatch();
  useEffect(()=>{
    const fetchPokemons = async () => {
      const pokemonsRes = await getPokemon(); // api para obtener pokemons
      dispatch(setPokemons(pokemonsRes));
    };
    fetchPokemons();
  },[])
  return (
    <div className="App">
      <PokemonList pokemons={pokemons} />
    </div>
  )
}

export default App;

hooks vs Connect

• Boilerplate -> Los hooks ahorran mucho código aquí.

• Separación de responsabilidades -> Connect hace un High Order Component, así que es mejor.

• Testing -> Es un poco más fácil con Connect.

Middlewares

Un middleware es un paso intermedio entre 2 procesos, en el caso de redux los middlewares se ejecutan despues de cuando se dispara una acción y antes de que lleguen al reducer.

Ejemplo básico

// ./middlewares/index.js

// Log
export const logger = (store: any) => {   // store de la aplicación
  return (next: any) => {          // next es una función que se llama cuando el middleware termina su trabajo y envía el action al reducer
    return (action: any) => {      // action es la información que se pasa al reducer
      console.log(action);
      next(action); // <-- hace que el action llegue al reducer
    } 
  }
};

// Alterar o cambiar el estado original antes de que llegue al reducer
export const featuring = (store: any) => {
  return (next: any) => {
    return (actionNew: any) => {
      debugger;
      const featured = [
        { name: 'Momea', url: 'https://ab.c' }, // <-- nuevo pokemon que quiero meter al state
        ...actionNew.payload, // <-- desestructura todos los pokemons que están en el payload de 'action'
      ];
      const updatedAction = {
        ...actionNew,
        payload: [
          ...featured,
        ]
      }
      next(updatedAction);
    } 
  }
};

// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { pokemonsReducer } from './reducers/pokemons';
import { Provider } from 'react-redux';
import { applyMiddleware, compose, legacy_createStore as createStore } from 'redux';
import { logger, featuring } from './middlewares';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

const composedEnhancers = compose(
  applyMiddleware(logger, featuring),
  (window as any).__REDUX_DEVTOOLS_EXTENSION__ && (window as any).__REDUX_DEVTOOLS_EXTENSION__(),
)

const store = createStore(pokemonsReducer, composedEnhancers);

root.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>
);

Redux Thunk

Es un Middleware que extiende las capacidades del store (enhancer), nos permite realizar acciones asíncronas en nuestros actions creators que por defecto no podemos hacer

Thunk es un concepto de programación donde se utiliza una función intermedia para retrasar la evaluación o ejecución de una operación, como puede ser la petición de una data a una API y demás acciones

para este caso en particular separaremos responsabilidades, delegando la petición a la API a nuestro action creator y no a el componente como se venia trabajando

---

Instalación

npm install redux-thunk

Integración simplemente debemos importarlo y añadirlo a nuestra composición de middlewares src/index.js:

import thunk from 'redux-thunk'; 
...
...
...

// index.js
const composeEnhancers = compose( 
  applyMiddleware(thunk, logger)  // **
)

const store = createStore(
    pokemonsReducer,
    composeEnhancers    
  )

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)

si estamos haciendo uso de la herramienta Redux DevTools debemos hacer pasos adicionales src/index.js:

import thunk from 'redux-thunk';
...
...

// index.js
const composeAlt = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE_ || compose 

const composeEnhancers = composeAlt( 
  applyMiddleware(thunk, logger) 
)

const store = createStore(
    pokemonsReducer,
    composeEnhancers    
  );

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
)

Creación action creator

Una vez integrado procederemos a crear nuestro action creator que será una función la cual contendrá la petición a la API que veníamos trabajando, esa función hará la petición a la API, obtendrá su respuesta y devolverá otra función la cual recibe como parámetro el dispatch para poder disparar acciones, este dispatch recibirá como parámetro la acción setPokemons que a su vez recibirá como parámetro la respuesta de la petición a la API src/actions/index.js:

// src/actions/index.js
export const getPokemonsWithDetails = (pokemons = [])=> async (dispatch)=> { // con el dispatch(next) es con lo que funciona redux thunk
    const pokemonsDetailed = await Promise.all(pokemons.map(pokemon => getPokemonDetail(pokemon)))
    dispatch(setPokemons(pokemonsDetailed))
}

Separación de responsabilidades

Una vez creada el action creator lo importamos y podemos hacer dispatch con el pasándole como parámetro nuestro arreglo de objetos de pokemones src/App.js:

// App.js
const App = () => {
  const pokemons = useSelector(state => state.pokemons)
  const dispatch = useDispatch()


  useEffect(()=> {
    const fetchPokemons = async ()=> {
      const pokemonsRes = await getPokemon()
      dispatch(getPokemonsWithDetails(pokemonsRes)) // llamado a Redux Thunk
    }

    fetchPokemons()
  }, [])

  return (
    <div className="App">
      ....
    </div>
  );
}

Glosario

1. compose en Redux

compose es una función utilitaria de Redux que permite combinar múltiples funciones en una sola, de manera que cada función recibe como entrada el resultado de la función anterior. Esto se usa comúnmente para combinar varias funciones de enhancers en la creación del store.

Es especialmente útil cuando se quieren aplicar múltiples funciones (como applyMiddleware, devToolsExtension, etc.) en el proceso de creación de un store de Redux. En lugar de hacer llamadas anidadas, compose permite encadenarlas de manera más limpia y legible.

Ejemplo de compose:

javascriptCopiar códigoimport { createStore, applyMiddleware, compose } from 'redux';
import rootReducer from './reducers';
import loggerMiddleware from './middlewares/logger';

const enhancer = compose(
  applyMiddleware(loggerMiddleware), // Aplica el middleware
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // Habilita Redux DevTools si está disponible
);

const store = createStore(rootReducer, enhancer);

En este ejemplo, compose combina applyMiddleware y Redux DevTools en una sola función (enhancer), que luego se pasa al createStore.

¿Cómo funciona compose?

• Toma funciones de izquierda a derecha.

• Cada función se aplica en el orden en que se pasa a compose.

• El resultado de la función de la izquierda se pasa como entrada a la función de la derecha.

Sintaxis básica:

javascriptCopiar códigoconst composedFunction = compose(func1, func2, func3);

• func1 se ejecuta primero, luego func2 y finalmente func3.

2. store creator en Redux

El store creator se refiere a la función createStore de Redux, que es la que crea y configura el store de Redux. El store es donde se mantiene el estado global de la aplicación y donde se gestionan las acciones y el flujo de datos.

createStore toma tres argumentos:

1. Reducer: Es la función que maneja cómo el estado cambia en respuesta a las acciones.

2. PreloadedState (opcional): Un estado inicial, es decir, el estado con el que se inicializa el store. Si no se pasa, Redux usará el estado por defecto.

3. Enhancer (opcional): Una función (como applyMiddleware o compose) que extiende o mejora el comportamiento del store.

Ejemplo de uso de createStore:

javascriptCopiar códigoimport { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(
  rootReducer, // El reducer que maneja el estado
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // Habilita Redux DevTools si está disponible
);

Diferencias y Relación entre compose y store creator

• createStore es la función principal utilizada para crear el store de Redux, donde se gestionan todas las acciones y el estado.

• compose se usa para combinar múltiples funciones (como middlewares o enhancers) que se pasan al createStore, de forma que se puedan aplicar de manera ordenada y modular.

3. Action Creator

Un Action Creator es una función que crea y retorna una acción (un objeto con un tipo específico y opcionalmente algún payload). Los action creators ayudan a encapsular la creación de acciones, permitiendo que sean reutilizables y centralizando la lógica de cada acción. Normalmente, se utilizan para evitar escribir objetos de acción manualmente en los componentes.

• Ejemplo de un Action Creator:

  // Action Creator simple
  const increment = (amount) => {
    return {
      type: 'INCREMENT',
      payload: amount,
    };
  };
  
  // Usar el Action Creator
  dispatch(increment(5));

En este ejemplo, increment es un action creator que toma un amount y devuelve un objeto de acción que luego se puede despachar en el store para ser manejado por los reducers. Esto hace que sea fácil de reutilizar y asegura que las acciones tengan una estructura consistente.

2. Enhancer

Un Enhancer en Redux es una función que extiende o modifica el store de Redux de alguna manera. Un enhancer no se ocupa de las acciones ni de los datos, sino de cambiar o agregar capacidades al store en sí, como mejorar la forma en que se gestionan las acciones o cómo se observa el estado. Los enhancers se suelen aplicar al crear el store con createStore, y se usan comúnmente para integrar herramientas adicionales.

• Ejemplo de Enhancer:

  import { createStore, applyMiddleware, compose } from 'redux';
  import rootReducer from './reducers';
  import loggerMiddleware from './middlewares/logger';
  
  // Enhancer que combina middlewares y otras herramientas
  const enhancer = compose(
    applyMiddleware(loggerMiddleware), // Agrega middlewares al store
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // Habilita Redux DevTools
  );
  
  const store = createStore(rootReducer, enhancer);

En este ejemplo, enhancer utiliza compose para combinar applyMiddleware (que permite agregar middlewares al store) con Redux DevTools, una herramienta de depuración. Los enhancers, por lo tanto, añaden o modifican capacidades en el store sin cambiar el funcionamiento de las acciones o reducers.

Diferencias clave

Característica	Action Creator	Enhancer
Propósito	Crear acciones para despachar cambios en el estado.	Agregar o modificar capacidades del store.
Dónde se utiliza	Directamente en componentes o dentro de la lógica de Redux.	Al momento de crear el store.
Ejemplos comunes	dispatch(actionCreator())	applyMiddleware, Redux DevTools
Modifica	La estructura de las acciones.	El comportamiento y capacidades del store.

Resumen

Los action creators se enfocan en generar acciones específicas para modificar el estado, mientras que los enhancers modifican o extienden el store de Redux para agregar capacidades o integraciones adicionales, como middlewares o herramientas de depuración. Ambos son útiles para diferentes aspectos de una aplicación Redux y, en conjunto, contribuyen a un flujo de trabajo escalable y mantenible.

• createStore es la función que crea el store de Redux y es responsable de configurar el manejo del estado.

• compose es una función de utilidad que permite combinar varias funciones en una sola, facilitando la combinación de enhancers, como middlewares o Redux DevTools, al pasarla a createStore.

Redux Toolkit

Es una libreria que nos ayuda a simplificar el uso de redux

npm i @reduxjs/toolkit

creamos carpeta

// ./slice/dataSlice.js
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  pokemons: [],
  loading: true,
};
export const dataSlice = createSlice({
  name: "data",
  initialState,
  reducers: {
    setPokemons: (state, action) => {
      state.pokemons = action.payload;
      state.loading = false;
    },
    setFavorite: (state, action) => {
      const indexPkmn = state.pokemons.findIndex(
        (pkmn) => pkmn.id == action.payload.id
      );
      if (indexPkmn >= 0) {
        state.pokemons[indexPkmn].isFavorite = !state.pokemons[indexPkmn].isFavorite;
      }
    },
  },
});

export const {setFavorite,setPokemons}= dataSlice.actions

//exportamos por default los reducer del objeto dataSlice para integrarlos en la
//raiz que integra todos nuestros reducers 
export default dataSlice.reducer

ahora pasaremos a pasar nustro slice a la raiz de nuestros reducer

// ./slice/rootReducer.js
import {combineReducers} from 'redux';
import { pokemonsReducer } from './pokemons';
import dataReducer from '../slices/dataSlice'; 
//como estamos utilicemmos la libreria de immutable, para 
// user reducer combinados, necesitamos instalar redux-immutable
const rootReducer = combineReducers({
    data: dataReducer
})
export default rootReducer;

Nota: Falta contenido y mejoras al texto.