freeCodeCamp

5.5 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036156	Use Middleware to Handle Asynchronous Actions	6	false		Use Middleware para manejar acciones asíncronas

Description

Hasta ahora, estos desafíos han evitado discutir acciones asíncronas, pero son una parte inevitable del desarrollo web. En algún momento, deberá llamar a puntos finales asíncronos en su aplicación Redux, así que, ¿cómo maneja este tipo de solicitudes? Redux proporciona middleware diseñado específicamente para este propósito, llamado middleware Thux de Redux. Aquí hay una breve descripción de cómo usar esto con Redux. Para incluir el middleware de Redux Thunk, se lo pasa como un argumento a Redux.applyMiddleware() . Esta declaración se proporciona luego como un segundo parámetro opcional para la función createStore() . Echa un vistazo al código en la parte inferior del editor para ver esto. Luego, para crear una acción asíncrona, devuelve una función en el creador de la acción que toma el dispatch como un argumento. Dentro de esta función, puede enviar acciones y realizar solicitudes asíncronas. En este ejemplo, una solicitud asíncrona se simula con una llamada setTimeout() . Es común enviar una acción antes de iniciar cualquier comportamiento asíncrono para que el estado de su aplicación sepa que se están solicitando algunos datos (este estado podría mostrar un icono de carga, por ejemplo). Luego, una vez que recibe los datos, envía otra acción que lleva los datos como una carga útil junto con la información de que la acción se ha completado. Recuerde que está pasando el dispatch como un parámetro a este creador de acción especial. Esto es lo que utilizará para despachar sus acciones, simplemente pase la acción directamente al despacho y el middleware se encarga del resto.

Instructions

Escriba los dos despachos en el creador de acción handleAsync() . Envíe setTimeout() requestingData() antes de setTimeout() (la llamada de API simulada). Luego, después de recibir los datos (simulados), despache la acción receivedData() , pasando estos datos. Ahora ya sabe cómo manejar acciones asíncronas en Redux. Todo lo demás sigue comportándose como antes.

Tests

tests:
  - text: El <code>requestingData</code> creador de acción debería devolver un objeto de tipo igual al valor de <code>REQUESTING_DATA</code> .
    testString: 'assert(requestingData().type === REQUESTING_DATA, "The <code>requestingData</code> action creator should return an object of type equal to the value of <code>REQUESTING_DATA</code>.");'
  - text: El <code>receivedData</code> creador de acción debería devolver un objeto de tipo igual al valor de <code>RECEIVED_DATA</code> .
    testString: 'assert(receivedData("data").type === RECEIVED_DATA, "The <code>receivedData</code> action creator should return an object of type equal to the value of <code>RECEIVED_DATA</code>.");'
  - text: <code>asyncDataReducer</code> debería ser una función.
    testString: 'assert(typeof asyncDataReducer === "function", "<code>asyncDataReducer</code> should be a function.");'
  - text: El envío del creador de la acción requestingData debe actualizar la propiedad de <code>state</code> almacenamiento de fetching a <code>true</code> .
    testString: 'assert((function() { const initialState = store.getState(); store.dispatch(requestingData()); const reqState = store.getState(); return initialState.fetching === false && reqState.fetching === true })(), "Dispatching the requestingData action creator should update the store <code>state</code> property of fetching to <code>true</code>.");'
  - text: Despachando <code>handleAsync</code> debe despachar la acción de solicitud de datos y luego despachar la acción de datos recibida después de un retraso.
    testString: 'assert((function() { const noWhiteSpace = handleAsync.toString().replace(/\s/g,""); return noWhiteSpace.includes("dispatch(requestingData())") === true && noWhiteSpace.includes("dispatch(receivedData(data))") === true })(), "Dispatching <code>handleAsync</code> should dispatch the data request action and then dispatch the received data action after a delay.");'

Challenge Seed

const REQUESTING_DATA = 'REQUESTING_DATA'
const RECEIVED_DATA = 'RECEIVED_DATA'

const requestingData = () => { return {type: REQUESTING_DATA} }
const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }

const handleAsync = () => {
  return function(dispatch) {
    // dispatch request action here

    setTimeout(function() {
      let data = {
        users: ['Jeff', 'William', 'Alice']
      }
      // dispatch received data action here

    }, 2500);
  }
};

const defaultState = {
  fetching: false,
  users: []
};

const asyncDataReducer = (state = defaultState, action) => {
  switch(action.type) {
    case REQUESTING_DATA:
      return {
        fetching: true,
        users: []
      }
    case RECEIVED_DATA:
      return {
        fetching: false,
        users: action.users
      }
    default:
      return state;
  }
};

const store = Redux.createStore(
  asyncDataReducer,
  Redux.applyMiddleware(ReduxThunk.default)
);

Solution

// solution required

5.5 KiB Raw Blame History