FAQ: Redux Middleware - Writing Thunks in Redux

[discourse-admin]

This community-built FAQ covers the “Writing Thunks in Redux” exercise from the lesson “Redux Middleware”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn Redux

FAQs on the exercise Writing Thunks in Redux

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply () below!
You can also find further discussion and get answers to your questions over in Language Help.

Agree with a comment or answer? Like () to up-vote the contribution!

Need broader help or resources? Head to Language Help and Tips and Resources. If you are wanting feedback or inspiration for a project, check out Projects.

Looking for motivation to keep learning? Join our wider discussions in Community

Learn more about how to use this guide.

Found a bug? Report it online, or post in Bug Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

[ajax8920070638]

I can’t seem to figure this our i checked my answer to the solution and it was identical but it does not allow to me continue, it says “The thunk returned by loadRecipes should dispatch an action with payload equal to the recipes returned by fetchRecipes() .” Someone please help!

[serega356]

You need add await in const recipes = fetchRecipes()

Must be const recipes = await fetchRecipes()

[ajax8920070638]

Thanks! Much appreciated

[horealazar1835252878]

Hi @serega356,

Thanks for the tip. I had the same problem. Now is OK. Cheers.

[petermonteer]

I’m not understanding where this dispatch argument comes from, it’s not imported anywhere, so how does this work?

[cmsyth]

Hi,
Same problem here. Where the dispatch comes from ?

[isolator911]

import { fetchUser } from './api'
const getUser = (id) => {
  return async (dispatch, getState) => {
    const payload = await fetchUser(id);
    dispatch({type: 'users/addUser', payload: payload});
  }
}

To get the user with id = 32 , we can call dispatch(getUser(32)) . Note that the argument to dispatch is not an object, but an asynchronous function that will first fetch the user’s data and then dispatch a synchronous action once the user’s information has been retrieved.

I’m confused by this. Hoping someone can help me understand. If the function getUser returns a function itself with 32 as the argument then how does this work? I thought dispatch took an action object? How does this work?

[isolator911]

I may have just found my own answer in the next part of the lesson:

redux-thunk Source Code

At this point, you are ready to use thunks to define asynchronous operations in Redux. But you may be curious about how redux-thunk works. In order to allow us to write action creators that return thunks in addition to plain objects, the redux-thunk middleware performs a simple check to the argument passed to dispatch . If dispatch receives a function, the middleware invokes it; if it receives a plain object, then it passes that action along to reducers to trigger state updates.

[arbocobra]

I’m still working on this exercise. I haven’t get it yet so I’m looking at the sample provided in the explanation:

const getUser = (id) => {
  return async (dispatch, getState) => {
    const payload = await fetchUser(id);
    dispatch({type: 'users/addUser', payload: payload});
  }
}

Can someone explain why getState is being included in the argument? I don’t see where it is being used in the rest of the function.

[alvaro_l]

If you look into App.js, you will see that loadRecipes is beign imported as a named import.
Likewise, useDispatch is beign imported there as well, so loadRecipes can make use of it.

My guess is that ‘useDispatch’ in allRecipesSlice.js is missing the named export statement export, which, I think, is where the confusion comes from. As it is now in the code, the app won’t work since App.js won’t be able to find loadRecipes in allRecipesSlice.js.