Use middleware to call whatever they're called actions

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) {
  // dispatch request action here
dispatch(requestingData());
  setTimeout(function() {
    let data = {
      users: ['Jeff', 'William', 'Alice']
    }
    // dispatch received data action here
dispatch(recievedData(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 (Macintosh; Intel Mac OS X 10.13; rv:76.0) Gecko/20100101 Firefox/76.0.

Challenge: Use Middleware to Handle Asynchronous Actions

Link to the challenge:

Hey guys! I’m struggling a bit with this. Can you see what’s wrong? Thank you!

2

if yo u are really desperate

3

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

dispatch(requestingData());

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

  dispatch(receivedData(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)
);

1 Like
4

Thank you, but I’m not sure I understand…It look the same to me.

5

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

Thank you for understanding.

6

Um, I didn’t get it anyway. It looks like my code to me.

7

It is receivedData not recievedData (cei, not cie).

1 Like
8

Holy moly! I better not tell my teacher that her smacking me with a ruler over that word was not effective! Thank you!