Alpha of freeCodeCamp's React + Redux challenges is now live

in the following code, could you help to explain the detailed purpose and function and use of const handleAsync function and the Redux.applyMiddleware(ReduxThunk.default) in the following code? this code is from Redux 12 Use Middleware to Handle Asynchronous Actions under http://hysterical-amusement.surge.sh/.

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(requestingData());
setTimeout(function() {
let data = {
users: ['Jeff', 'William', 'Alice']
}
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)
);

if handleAsync is a action creator, what is its specific use in the original code?
if I add following code to the original code? why are there following problems?

store.subscribe(()=>{
  console.log('code is executed: ', state.getState())
})// why doesnt log anything?? means store.dispatch(handleAsync()) did not fire??

store.dispatch(handleAsync());//should use action creator like this?

console.log(store.getState());//why shows nothing?

Thanks so much Quincy - these challenges were so needed :slight_smile: I can’t say how much I appreciate it! - Jessi

2 Likes

This is so great! Just now seeing this a month later :relaxed: Looking forward to trying these out.

2 Likes

Me too - just finished the 5th one - its awesome to have these challenges to study and understand React better :relaxed:

1 Like

Wonderful resource – 30 exercises in, I haven’t had any issues.

Can’t thank you enough, Quincy.

1 Like

I’ve noticed that if ‘Shift + R’ is pressed at anytime (in input or not), it resets the current challenge’s code.

Similarly, if ‘Shift + S’ is pressed, the solution is presented.

That’s right! This is intentional… however kept quiet because we don’t have support for all OS keyboard types and so on.

1 Like

Really glad to see this post, hope react learning lesson come to live soon.

I think people should also know how to deal with asynchronous redux action transformation, so redux-observable / redux-saga challenges would be great too. I personally do prefer redux-observable.

@P1xt - wow, thanks! That means a lot coming from you! @bonham000 is def responsible for more than I am, but glad to hear you’re enjoying them either way, a lot of work went into them for sure

1 Like

There is a typo in the example provided in challenge React - Redux 4, in the example <Provider store={store}> <App/> <Provider/>

the last tag should be </Provider>

Hello guys! Are this challenges mandatory?
Should I save the code of the challenges I pass, locally or I can just take it easy?

Thank you!

I went through this last week. I only skimmed the React section but I completed all of the Redux and React-Redux challenges. I didn’t find any bugs in those and it was actually the most clear and concise Redux tutorial I have found to date. :+1: A+ job, thank you @bonham000 and @no-stack-dub-sack

1 Like

Im new at code camp and trying to start the program. I have gotten to the point of setting up my github account but need to know how to complete the other steps

I’m thrilled that I finally found this post…as I’m getting my butt kicked on the dungeon challenge. So, I think I’ll be going back to basics on these challenges. I have one question (probably a dumb one but), these wont update in our camper “map” will they?

No, not yet. The beta curriculum doesn’t communicate with the mainstream one. You’re ‘progress’ isn’t recorded (unless you consider finally being able to build the dungeon crawler as progress :wink: )