24. El día en el que nada funciona como esperas

En todo proceso de creación artística hay días crudos. Donde no encuentras el azul idóneo para reflejar esas nubes tormentosas que ni son de un color ni otro. Y pruebas, una y otra vez, y no encuentras ni el color ni el consuelo.

¿Qué es thunk?

Introducimos redux-thunk, una librería que amplía las funciones de redux. He leído por ahí que thunk sería otra forma de decir función. Es un palabro sin duda porque ejecuta una acción bastante abstracta, pero efectiva.

Con el redux simple, las acciones tienen que ser funciones planas. Por tanto no puedes utilizar async/await, ya que la conversión a través de babel para hacer compatible el código JavaScript con todos los navegadores convierte esa combinación en una combinación de funciones. Ver aquí esa conversión.

El mejor tutorial encontrado para esto es este gran artículo: What the heck is a "thunk"?

Thunk es un middleware

Con lo que su conexión con el código actual es muy sencilla:

import { createStore, applyMiddleware } from "redux";
import reduxThunk from "redux-thunk";
const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const quoteStore = createStoreWithMiddleware(reducers);

Ese quoteStore es la ampliación de ese store de redux que hemos visto en días anteriores.

Todo parece correcto entonces para incluir una llamada asíncrona en nuestras acciones:

export const fetchQuoteRandom = () => {
  return async dispatch => {
    const response = await fetch(
      "https://philosophers-api.herokuapp.com/api/v1/quotes/random"
    );
    response
      .json()
      .then(data => {
        dispatch({
          type: "FETCH_QUOTE",
          payload: data.data
        });
      })
      .catch(console.log);
  };
};

Todo parece encajar. ¿TODO?

No encuentro mi azul tormentoso, solo un error una y otra vez:

Cannot read property 'map' of undefined

¿Qué pasa? 😱

Nota: Mañana, en el día 25, comparto el código y te explico que dejó de funcionar.