Redux - Use Middleware to Handle Asynchronous Actions

JavaScript
1

But how does the asyncDataReducer know the action is coming from handleAsync?
Or am I missing something?
A little confused here.

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

    [spoiler]dispatch(requestingData());[/spoiler]

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

     [spoiler] dispatch(receivedData(data));[/spoiler]

    }, 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/119.0.0.0 Safari/537.36

Challenge Information:

Redux - Use Middleware to Handle Asynchronous Actions

2

Hello @SebZG
Do not create duplicate topics. I deleted the duplicates.

1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.