¿Cuál es el uso de middleware Redux thunk?

Redux es una herramienta de gestión de estado, que se utiliza para almacenar el estado de diferentes variables en nuestra aplicación de reacción. Facilita las aplicaciones de reacción complejas al centralizar el estado de la aplicación. Puedes aprender más sobre redux aquí . Redux admite middleware, y las funciones de middleware se ejecutan entre el envío de una acción y el momento en que llega al reductor. Los middlewares de Redux se pueden usar para registro, enrutamiento, acciones asincrónicas, etc.

Para el alcance de este tutorial, nos centraremos en un middleware redux llamado thunk. Nos permite devolver funciones en lugar de objetos de acciones redux. Plain redux no permite una lógica compleja dentro de las funciones de acción, solo puede realizar actualizaciones sincrónicas simples mediante el envío de acciones. Este middleware amplía su capacidad y le permite escribir una lógica compleja que interactúa con la tienda. Thunk no interfiere con la acción hasta que devuelve una función. Thunk nos permite despachar acciones manualmente, lo que nos da el poder de incorporar algo de lógica o ejecutar algún código asincrónico antes de despachar una acción. La función devuelta de la acción se llama función thunk que se llama con dos argumentos: 

1. despacho: Es un método utilizado para despachar acciones, que pueden ser recibidas por reductores. 
2. getState: da acceso a almacenar dentro de la función thunk.

Una función thunk puede contener cualquier lógica arbitraria, sincronizada o asincrónica, y puede llamar a dispatch o getState en cualquier momento. Antes de continuar, comprendamos la diferencia entre el flujo de redux con y sin thunk.

Redux flujo sin thunk: 

 

Flujo de Redux con Thunk: 

 

Configuración de Redux con Thunk:

Paso 1: para configurar redux con thunk, comenzaremos creando una aplicación de reacción e instalaremos todas las dependencias requeridas. Ejecute el siguiente comando para crear una nueva aplicación de reacción.

npx create-react-app myapp

Paso 2: Abra su proyecto en un editor de código e instale todos los paquetes necesarios: redux, react-redux y redux-thunk.

npm install redux react-redux redux-thunk

Ahora, cree dos archivos dentro del directorio raíz: actions.js y reducers.js.

A continuación se muestra la estructura actualizada del proyecto: 

 

Ahora crearemos algunas acciones y reductores para interactuar con la tienda en función de esas acciones. 

Crearemos dos acciones, deleteData es un creador de acciones normal, no incluye ninguna lógica compleja o asíncrona, por lo tanto, thunk no interferirá en su ejecución. El creador de la acción addData contiene lógica asíncrona, por lo tanto, devolvemos una función (función thunk) que llama al despacho cuando se obtienen datos de la API. (Para este tutorial, usamos JSONPlaceholderAPI; puede obtener más información al respecto aquí ). Luego, en el archivo app.js, agregamos botones para enviar las acciones y mostrar los datos obtenidos.

// This is a synchronous action, hence
// thunk will not interfere.
export const deleteData = ()=>{
    return ({
        type : 'DELETE_DATA'
    })
}
  
// This function includes some async logic,
// hence we can dispatch action manually
export const addData  = ()=>{
  
    // Thunk Function
    return async (dispatch,getState)=>{
  
        // Fetching results from an API : asynchronous action
        const response = await fetch(
            'https://jsonplaceholder.typicode.com/todos/1');
        const data = await response.json();
  
        // Dispatching the action when async
        // action has completed.
        dispatch({
            type : 'ADD_DATA',
            payload : data
        });
    }
}

Aquí crearemos reductores para actualizar el estado en función de esas acciones y exportaremos los reductores para crear un estado. 

const { combineReducers } = require("redux");
  
const INITAL_STATE  = {
    todo : null
}
  
const dataReducer = (state=INITAL_STATE, action)=>{
    switch(action.type) {
        case 'ADD_DATA' : return {...state, todo : action.payload};
        case 'DELETE_DATE' : return INITAL_STATE;
        default : return state;
    }
}
  
const reducers = combineReducers({
    data : dataReducer
})
  
export default reducers

Primero limpiaremos un código repetitivo y luego crearemos una tienda con thunk de middleware. La función de proveedor centraliza el estado en toda nuestra aplicación.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
  
import { applyMiddleware, createStore } from "redux";
import reducers from "./reducers";
import thunk from "redux-thunk";
import { Provider } from "react-redux";
  
  
// Create store with the reducers and
// apply thunk as a middleware
const store = createStore(reducers, applyMiddleware(thunk));
  
const root = ReactDOM.createRoot(
    document.getElementById("root"));
  
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

Comenzamos importando todas las acciones y enlaces, luego usamos el enlace useDispatch para enviar acciones y el enlace useSelector para acceder a los datos en la tienda. Agregamos dos botones para llamar a las funciones del controlador handleAddData y handleDeleteData, que envían sus respectivas acciones.

import React from "react";
import { useDispatch, useSelector } from "react-redux";
import { addData, deleteData } from "./actions";
const App = () => {
  const dispatch = useDispatch();
  // Selects the state value from the store.
  const todo = useSelector((state) => state.data.todo);
  // Dispatches action to add the data
  const handleAddData = ()=>dispatch(addData());
  // Dispatches action to delete the data.
  const handleDeleteData = ()=>dispatch(deleteData());
  return (
    <div>
      <button onClick={handleAddData}>Add Data</button>
      <button onClick={handleDeleteData}>Delete Data</button>
  
      {todo && <div>{JSON.stringify(todo)}</div>}
    </div>
  );
};
  
export default App;

Producción: