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

Store Creator

Es una función que crea el store de redux.

Enhancer

Potenciadores del store. Son funciones de orden superior que toma un store creator y devuelve una versión potenciada. Similar a los middlewares ya que te permite alterar la interfaz del store de manera combinable, por ejemplo los dev tools es un potenciador del store.

Compose

Es una herramienta de programación funcional que combina funciones de derecha a izquierda y lo usamos para poder tener mutiples potenciadores del store.

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.