Cómo funcionan las acciones asíncronas de Redux con Redux Thunk

Introducción

De forma predeterminada, las acciones de Redux se envían de forma síncrona, lo cual es un problema para cualquier aplicación no trivial que necesite comunicarse con una API externa o realizar efectos secundarios. Redux también admite el middleware que se encuentra entre la acción que se envía y la acción que llega a los reductores.

Hay dos bibliotecas muy populares de middleware que permiten efectos secundarios y acciones asíncronas: Redux Thunk y Redux Saga. En este artículo, aprenderá sobre Redux Thunk.

Thunk es un concepto de programación donde se utiliza una función para retrasar la evaluación o el cálculo de una operación.

Redux Thunk es un middleware que le permite invocar creadores de acciones que devuelven una función en vez de un objeto de acción. Esa función recibe el método de envío de la tienda, que luego se utiliza para enviar acciones síncronas regulares dentro del cuerpo de la función una vez que se completaron las operaciones asíncronas.

En este artículo, aprenderá cómo agregar Redux Thunk y cómo puede integrarse en una aplicación de tareas pendientes hipotética.

Requisitos previos

En esta artículo, se asume que tiene algunos conocimientos básicos de React y Redux. Puede consultar este artículo si recién está comenzando a usar Redux.

Este tutorial se basa en una aplicación de tareas pendientes hipotética que rastrea las tareas que se deben realizar y completar. Podemos suponer que create-react-app se utilizó para generar una nueva aplicación React y que redux, react-redux y axios ya se instalaron.

Aquí no se explica en detalle cómo crear una aplicación de tareas pendientes desde cero. Se presenta como un contexto conceptual para resaltar Redux Thunk.

Cómo agregar redux-thunk

Primero, utilice el terminal para navegar al directorio del proyecto e instalar el paquete redux-thunk en su proyecto:

npm install redux-thunk@2.3.0

Ahora aplique el middleware cuando cree la tienda de su aplicación usando applyMiddleware de Redux. Dada una aplicación React con redux y react-redux, su archivo index.js podría verse así:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import './index.css';
import rootReducer from './reducers';
import App from './App';
import * as serviceWorker from './serviceWorker';

// use applyMiddleware to add the thunk middleware to the store
const store = createStore(rootReducer, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Ahora, importó y aplicó Redux Thunk en su aplicación.

Cómo usar Redux Thunk en una aplicación de muestra

Redux Thunk se usa con mayor frecuencia para comunicarse de manera asíncrona con una API externa y, así, recuperar o guardar datos. Redux Thunk facilita el envío de acciones que siguen el ciclo de vida de una solicitud a una API externa.

Normalmente, crear un nuevo elemento de tarea implica enviar primero una acción para indicar que se inició la creación de un elemento de tarea. Luego, si el elemento de tarea se crea correctamente y el servidor externo lo devuelve, se envía otra acción con el nuevo elemento de tarea. En el caso de que se produzca un error y la tarea no se guarde en el servidor, se puede enviar una acción con el error.

Veamos cómo se puede hacer esto usando Redux Thunk.

En el componente de su contenedor, importe la acción y envíela:

import { connect } from 'react-redux';
import { addTodo } from '../actions';
import NewTodo from '../components/NewTodo';

const mapDispatchToProps = dispatch => {
  return {
    onAddTodo: todo => {
      dispatch(addTodo(todo));
    }
  };
};

export default connect(
  null,
  mapDispatchToProps
)(NewTodo);

La acción usará Axios para enviar una solicitud POST al punto de conexión de JSONPlaceholder (https://jsonplaceholder.typicode.com/todos):

import {
  ADD_TODO_SUCCESS,
  ADD_TODO_FAILURE,
  ADD_TODO_STARTED,
  DELETE_TODO
} from './types';

import axios from 'axios';

export const addTodo = ({ title, userId }) => {
  return dispatch => {
    dispatch(addTodoStarted());

    axios
      .post(`https://jsonplaceholder.typicode.com/todos`, {
        title,
        userId,
        completed: false
      })
      .then(res => {
        dispatch(addTodoSuccess(res.data));
      })
      .catch(err => {
        dispatch(addTodoFailure(err.message));
      });
  };
};

const addTodoSuccess = todo => ({
  type: ADD_TODO_SUCCESS,
  payload: {
    ...todo
  }
});

const addTodoStarted = () => ({
  type: ADD_TODO_STARTED
});

const addTodoFailure = error => ({
  type: ADD_TODO_FAILURE,
  payload: {
    error
  }
});

Observe cómo el creador de la acción addTodo devuelve una función, en lugar del objeto de la acción regular. Esa función recibe el método de envío de la tienda.

Dentro del cuerpo de la función, primero envíe una acción síncrona inmediata a la tienda para indicar que empezó a guardar la tarea con la API externa. Luego, realice la solicitud POST real al servidor usando Axios. En caso de una respuesta exitosa del servidor, enviará una acción de éxito síncrona con los datos recibidos de la respuesta, pero, en caso de una respuesta fallida, enviará una acción síncrona diferente con el mensaje de error.

Cuando se utiliza una API externa, como JSONPlaceholder en este caso, se puede ver el retraso real de la red. Sin embargo, si está trabajando con un servidor de backend local, las respuestas de la red pueden pasar demasiado rápido para experimentar el retraso de la red que experimentaría un usuario real, por lo que puede añadir un retraso artificial al desarrollar:

// ...

export const addTodo = ({ title, userId }) => {
  return dispatch => {
    dispatch(addTodoStarted());

    axios
      .post(ENDPOINT, {
        title,
        userId,
        completed: false
      })
      .then(res => {
        setTimeout(() => {
          dispatch(addTodoSuccess(res.data));
        }, 2500);
      })
      .catch(err => {
        dispatch(addTodoFailure(err.message));
      });
  };
};

// ...

Para probar los escenarios de error, puede lanzar un error manualmente:

// ...

export const addTodo = ({ title, userId }) => {
  return dispatch => {
    dispatch(addTodoStarted());

    axios
      .post(ENDPOINT, {
        title,
        userId,
        completed: false
      })
      .then(res => {
        throw new Error('addToDo error!');
        // dispatch(addTodoSuccess(res.data));
      })
      .catch(err => {
        dispatch(addTodoFailure(err.message));
      });
  };
};

// ...

Para completar, aquí hay un ejemplo de cómo se vería el reductor de tareas para manejar el ciclo de vida completo de la solicitud:

import {
  ADD_TODO_SUCCESS,
  ADD_TODO_FAILURE,
  ADD_TODO_STARTED,
  DELETE_TODO
} from '../actions/types';

const initialState = {
  loading: false,
  todos: [],
  error: null
};

export default function todosReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO_STARTED:
      return {
        ...state,
        loading: true
      };
    case ADD_TODO_SUCCESS:
      return {
        ...state,
        loading: false,
        error: null,
        todos: [...state.todos, action.payload]
      };
    case ADD_TODO_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload.error
      };
    default:
      return state;
  }
}

Para qué sirve getState

Además de recibir el método de envío del estado, la función devuelta por un creador de acciones asíncronas con Redux Thunk también recibe el método getState de la tienda, por lo que los valores actuales de la tienda se pueden ver así:

export const addTodo = ({ title, userId }) => {
  return (dispatch, getState) => {
    dispatch(addTodoStarted());

    console.log('current state:', getState());

    // ...
  };
};

Al hacer lo que se menciona arriba, el estado actual simplemente se imprimirá en la consola.

Por ejemplo:

{loading: true, todos: Array(1), error: null}

Usar getState puede ser útil para manejar las cosas de manera diferente según el estado actual. Por ejemplo, si desea limitar la aplicación a solo cuatro elementos de tareas a la vez, puede regresar de la función si el estado ya contiene la cantidad máxima de elementos de tareas:

export const addTodo = ({ title, userId }) => {
  return (dispatch, getState) => {
    const { todos } = getState();

    if (todos.length > 4) return;

    dispatch(addTodoStarted());

    // ...
  };
};

Al hacer lo que se menciona arriba, la aplicación se limitará a cuatro elementos de tareas.

Conclusión

En este tutorial, aprendió a agregar Redux Thunk a una aplicación React para permitir el envío de acciones de forma asíncrona. Esto es práctico cuando se utiliza una tienda de Redux y API externas.

Si desea aprender más sobre React, eche un vistazo a nuestra serie Cómo crear código en React.js, o consulte nuestra página del tema React para ver ejercicios y proyectos de programación.