freeCodeCamp

5.5 KiB

Raw Blame History

id	title	challengeType	isRequired	videoUrl	localeTitle
5a24c314108439a4d4036156	Use Middleware to Handle Asynchronous Actions	6	false		Use o middleware para manipular ações assíncronas

Description

Até agora, esses desafios evitaram discutir ações assíncronas, mas são uma parte inevitável do desenvolvimento da web. Em algum momento, você precisará chamar endpoints assíncronos em seu aplicativo Redux, então, como você lida com esses tipos de solicitações? O Redux fornece middleware projetado especificamente para esse propósito, chamado middleware Redux Thunk. Aqui está uma breve descrição de como usar isso com o Redux. Para incluir o middleware Redux Thunk, você o passa como um argumento para Redux.applyMiddleware() . Esta declaração é então fornecida como um segundo parâmetro opcional para a função createStore() . Dê uma olhada no código na parte inferior do editor para ver isso. Em seguida, para criar uma ação assíncrona, você retorna uma função no criador de ações que toma o dispatch como um argumento. Dentro dessa função, você pode despachar ações e executar solicitações assíncronas. Neste exemplo, uma solicitação assíncrona é simulada com uma chamada setTimeout() . É comum despachar uma ação antes de iniciar qualquer comportamento assíncrono para que o estado do seu aplicativo saiba que alguns dados estão sendo solicitados (esse estado pode exibir um ícone de carregamento, por exemplo). Em seguida, depois de receber os dados, você despacha outra ação que transporta os dados como uma carga juntamente com informações de que a ação foi concluída. Lembre-se de que você está passando o dispatch como um parâmetro para esse criador de ações especiais. Isto é o que você usará para despachar suas ações, você simplesmente passa a ação diretamente para despachar e o middleware cuida do resto.

Instructions

Escreva ambos os dispatches no criador de ações handleAsync() . Dispatch requestingData() antes do setTimeout() (a chamada da API simulada). Em seguida, depois de receber os dados (pretendidos), despache a ação receivedData() , passando esses dados. Agora você sabe como lidar com ações assíncronas no Redux. Tudo o resto continua a se comportar como antes.

Tests

tests:
  - text: O criador da ação <code>requestingData</code> deve retornar um objeto do tipo igual ao 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: O criador da ação <code>receivedData</code> deve retornar um objeto do tipo igual ao 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> deve ser uma função.
    testString: 'assert(typeof asyncDataReducer === "function", "<code>asyncDataReducer</code> should be a function.");'
  - text: Despachar o criador da ação requestingData deve atualizar a propriedade do <code>state</code> da loja de busca para <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: Dispatching <code>handleAsync</code> deve despachar a ação de solicitação de dados e depois despachar a ação de dados recebidos após um atraso.
    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