First of all, I want to get start by cleaning up my firebase database.
I'm going to delete this orders node in our real time database here because I want to start from scratch
and get rid of all the old orders. I'll leave the ingredients here though because we'll soon go back
to fetching them from the server and not getting them or not having them stored locally in our store,
though only for demo purposes, in a real application that might of course also make sense to initialize
the ingredients in your code.
So with that let's see what we can do
and the first thing I actually want to do, I want to add to our code are the redux dev tools.
We installed that extension for the browser in the last module,
now we want to set up the store here in our burger builder application such that we can use the dev
tools there too because I want to be able to analyze my store. For that,
I'm back on the redux dev tools extension github page with the installation instructions and there's
one difference to the set up we used in the last module, though we'll go back to that set up from there.
Right now we don't use any middleware,
so we don't need the advance store set up where we need it to create this composeEnhancers constant and
use the native compose function or those special variable passed by the dev tools, since I got no other
enhancers
right now, we're not using any middleware yet,
we can go with the basic set up for now. Though as I just said, we're going to switch back to the advanced
set up soon because we're about to add middleware, with the basic set up however all we have to do is
add this argument here to our create store function call.
So accessing to special or actually it's one of the same, special variable on the window object which
is provided by the redux dev tools extension which we pass as a variable and then also execute as a function.
So this is simply something we have to add as a second argument to create store, redux dev tools extension
and executing it as a function. With this tiny change, if we save the index.js file and we go back
to our application,
we should already be able to open our dev tools and there, switch to redux and it should load our redux
inspector then, we should see init state and if I add an ingredient, we should see that add ingredient
action here,
of course the same for removing it.
And there we can also use time travelling,
so this is working great.
So here we got the functionality we want so that we're able to conveniently work with our application and
easily debug it and have a look at our current state.
So that's the first thing I wanted to do, with that out of the way,
let's dive into our actual business logic and let's start adding functionality to handle orders with
redux tool.