I already wrote the code below, but it don’t pass the last requirement. I searched the forum, and I found that the correct code is same like mine, why it didn’t work?
I read about the Middleware and dispatch . I still don’t know the workflow from dispatch and Middleware.
Is it action -> dispatch -> Miidleware-> reducer?
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)
);
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36.
Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/redux/use-middleware-to-handle-asynchronous-actions