Use Middleware to Handle Asynchronous Actions --i dont understand a bit

JavaScript
1

Tell us what’s happening:

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) {
    requestingData([REQUESTING_DATA])// dispatch request action here

    setTimeout(function() {
      let data = {
        users: ['Jeff', 'William', 'Alice']
      }
      receivedData([RECEIVED_DATA])

    }, 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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.162 Safari/537.36.

Link to the challenge:

2

Yes this is heavy. I realised that I didn’t really understand that redux basic stuff (state, actions, reducers) so there is no chance of understanding that asynchronous stuff.

Here is a very basic introduction (but not asynchronous stuff):

I found that tutorial about Asynchronous Redux:


This is not perfect because it uses redux and react but in just reading the text parts (and not looking to much at the code) you got an idea what middleware is and what a thunk is. Maybe someone knows a better tutorial.

1 Like
3

oh, thank you very much sir! That’s so kind of you.