Calling handleAsync : in Use Middleware to Handle Asynchronous Actions

Calling handleAsync : in Use Middleware to Handle Asynchronous Actions
0

**The code is not running, i want to ask about "handleAsync ".

  1. Is it a function or action creator
  2. and we have not called this function anywhere is your code neither instructions are there to initiate this function**

Your code so far


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
    store.dispatch(requestingData);
    

    setTimeout(function() {
      let data = {
        users: ['Jeff', 'William', 'Alice']
      }
      // dispatch received data action here
    store.dispatch(receivedData);
    }, 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)
);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions

It’s a function that returns a function; when you call it it dispatches an action then it waits for a response and dispatched a second action. It’s effectively an action creator that can create more actions, but those actions maybe dont execute straightaway (subroutines). It’s not in the code anywhere else because it’s the actual function that gets called. If you were using React, this would just send a message saying a request had been made and nothing else, it’s pretty useless:

<button onClick={() => requestingData() } >Make a Request</button>

Whereas this will do the async thing: it’ll send a message to the reducer saying a request has been made, then sometime later it’ll send another message to the reducer saying the request completed, and update the store with the data.

<button onClick={() => handleAsync() } >Make a Request</button>

Your syntax is wrong though

store.dispatch(requestingData)

It’s not store.dispatch, it’s just dispatch. dispatch is a parameter that gets passed into the function. It happens to be the store’s dispatch function, but it’s the middleware that joins it to the store. handleAsync is just a function that returns a function, and dispatch is just a parameter, it could be called anything, store does not exist in that scope.

And you pass values to dispatch. It’s like dispatch({type: 'REQUESTING_DATA'}). And you have a function that produces that value (requestingData), so you need to execute the function

dispatch(requestingData())
dispatch(receivedData(data))