So over the last lectures, we added our action creators.
Right now, we're handling only synchronous code though
but I mentioned that the idea of course is to use asynchronous code in there too,
at least when it comes to handling orders. Before we do that, we get one piece of asynchronous code we
can execute right away though, in the burger builder container, we used to fetch our ingredients from
componentDidMount and I paused this temporarily when we switched to redux.
Now is the time to again fetch this
and there are two routes you can take,
you can comment in the old code in componentDidMount where we reach out to our firebase backend,
where we fetch the data and instead of calling this.setState here, you could dispatch some to be created
action which updates our ingredients in the redux store.
Then you would run the async code in your component and you wouldn't need action creators at all because
you just dispatch normal actions at the end
once the response is there. That is perfectly fine to do but the idea behind action creators is that
you can still put your async code into the redux world
and as I mentioned earlier, this is the route I want to take here. For that, I first of all need to install
redux-thunk so I'll quit my npm start process and with npm install --save, I'll install
redux-thunk.
That's this middleware which allows us to use asynchronous code in action creators due to the middleware
wrapping itself around the dispatch action and blocking the request until the async code is done, so
to say. With it installed, we can restart npm start and now I want to add this middleware,
so what I'll do is all head over to index.js
and then there at the top,
I'll add my import, I'll import thunk,
you can name it whatever you want, from redux-thunk and this thunk here now has to be added with
applyMiddleware.
So I'm going to import something from redux and that something is applyMiddleware
and since we also have the dev tools added, you'll learn that we also need to import compose and then adjust
our dev tools setup.
We can consult the dev tools page again to see that set up we should use, we created that composeEnhancers
thing where we either used the redux dev tools variable or the native compose function from the redux package
and then we created our store with that composeEnhancers function which allows us to then also
pass applyMiddleware as an argument.
So this is the set up I'll use here too,
I'll just copy the code from the github page and paste it into my index.js file before I create
a store, this code here where I reach out to this variable or the compose function we just imported
.
Keep in mind, compose allows us to compose our own set of enhancers and middleware is just one kind of
enhancer, the
dev tools would be another example.
So with that, we got our composeEnhancers constant.
Now if we have a look at the github page,
we should create a store by passing it and then passing applyMiddleware as an argument,
so let's do that. Let's get rid of the old code we passed as a second argument to create store and let's
instead use composeEnhancers as a function here.
Now to this function and I'll just put this into a new line to make it a bit easier to read,
I'll pass
applyMiddleware and to applyMiddleware, I'll pass thunk, the middleware
I want to apply. With that, the thunk middleware is unlocked and should work fine,
the dev tools also still should work fine,
we should still see them if we reload the page, looks good.
So now we can start writing async code in our action creators.
Let's do that for fetching the ingredients
we may add in the next lecture.