So in the last lecture we added our own middleware which is a logging middleware outputting something
whenever we dispatch an action.
Now this is nice and it allows us to get some insights into our store but only if we dispatched an action,
that would be more useful if we could always look into the store.
Now in the debugging section, we learned about the react dev tools and there, we can have a look at all the
components, the component tree and the state of each of that.
And for the provider for example, we get the store but there we only see the utility functions,
we don't really see what's inside the store.
So this isn't that great, now
there are ways to work around that, if
we click on the counter component for example, we see the current value of the counter prop
but still, it's difficult if we have to navigate to a component which gets a certain slice of the state
just to see that slice, would be nicer to be able to look at the full store and even see the actions
which were dispatched, maybe even rewind.
Well for that there are special developer tools we can install, if you google for redux dev tools,
you'll find two results,
the second one, the redux dev tools extension or to be precise, the third one the redux dev tools
in the chrome web store,
that's an interesting thing.
You should install this extension to Chrome,
it will give you a nice plugin you can use to look into your store.
Now you can read more instructions on that second result,
the redux dev tools extension github repository, here you'll find more instructions about how to install and
set it up, in the end it's super simple, you just need to download that extension and install it and you're
pretty much done.
One more step is required though
but I will of course also walk you through the required steps.
Now important, don't have a look at the first result here,
these are also dev tools which you can implement programmatically into your app,
we want to have that browser extension though.
So there, we see the steps we need to apply,
now assume you already installed the dev tools, if you then open them via your developer tools, there should
be a redux option now,
might have to switch back to the console first.
You should see the redux dev tools open up here on the right,
now it's saying no store found because we haven't followed the second step where we have to basically
inform this extension that there is a store in our web app and for that, we simply need to set up a special
variable here or pass a special enhancer we should say to our create store method. Since we're using a
middleware we have to use the advance store set up
but it's still pretty simple. Let's copy that strangely named variable here on the window object,
the redux dev tools extension compose thing here, this essentially is a variable which is injected by
the Chrome extension into our javascript at runtime so it will be available. Back in our code in the
index.js file where
we create our store,
I will first of all as instructed here create a custom constant before we do anything on the store, I'll
name it composeEnhancers. This will then be our special variable or in case that can't be found,
we'll fall back to a default compose function provided by redux,
you can import it from the redux package.
Now compose is a little bit similar to combineReducers, combineReducers allows us to combine well
reducers, compose allows us to combine enhancers, applyMiddleware is only for middlewares if we have
other enhancers like the store dev tools, we need to use compose to compose a set of enhancers with both
the dev tools features and our middleware.
So we also add compose here, separate it with this or sign to take this dynamically injected variable if available
but if not, to still have to fall back to the native redux solution which of course doesn't give us dev
tools support then.
So now composeEnhancers essentially just holds a function,
if we go back to the documentation,
we see that now we should create our store and use this new composeEnhancers function which uses either
the dev tools function or the natively built-in one to then pass applyMiddleware to it.
So we'll do that,
I will wrap applyMiddleware in create store with composeEnhancers,
so with this constant name here composeEnhancers, wrap applyMiddleware with it so pass applyMiddleware
as a function to that,
you don't need to pass anything about the dev tools because it will be passed in automatically, if
that is chosen, so if that is available.
So we got a set up where we should be able to connect our browser extension to the store running in
our Javascript code.
Let's have a look, let's go back to the react application and there, you should already see that the
redux view here is filled with life.
Here you see all actions which were emitted, like the init action which happens first,
can shrink this to get a different view on this
and there you see for each action, what type this was or which payload it actually carried,
also anything besides type, what the state is at this point of time, how it changed the state
and you can always look into the state therefore with this state button at a given point of time.
Now if I dispatch a new action by for example subtracting 15, you'll see it gets added here
and if you click on it, we see what the state is after this action, this state here,
you also see the old state if you click on the action, on the init action,
so you see the state at different points of times. You'll see how the subtract action changed the state,
it deducted 15 off the counter and you'll see what the action carried,
that's pretty useful.
Now we can add more and more and we can always see how we adjusted our state and what our current state
is and what our state was in the past.
So redux dev tools are extremely useful and definitely dive into the documentation I pointed you to
to learn more about them.
Now one important feature I want to show you is the time traveling, with the redux dev tools,
you can travel through time.
So for example, of course the application we see here reflects the state after all these actions
but if we wanted to rewind and say yes let's go back to that subtracting here, you can click on subtract and
then on jump
and now you see you are back to that point of time where you just subtracted 15.
Now the old states are not lost,
you can always go back to there by clicking jump on that again
but you can also go back and for example skip this to update your state as if you haven't ever dispatched
this action
and of course, this can also be reverted.
So this is a extremely nice feature which gives you a lot of debugging possibilities and especially
more complex apps,
this is great to make sure that only actions are dispatched you expected to be dispatched and to
find out why the state is currently in
well the state it is in.