Redux Logger: How to Monitor Problems in React Redux Apps

[00:00 - 00:15] Redux logger. Redux diff tools are cool, but some people, including me, prefer to have a quicker way to observe what is happening inside their Redux application. Let's install Redux logger. Yarn. Add Redux. Logger. And types for it. Types.

[00:16 - 00:36] Redux. Logger. Wait until it installs. Then open SRC. Store TS. Impert. Compose with dev tools from the Redux dev tools extension. Remove that dev tools enhancer. And instead call compose with dev tools. Inside of it we pass apply. Middleware. Impert it from Redux.

[00:37 - 01:00] And pass in a logger. We import it from Redux logger. Form of the document. Now just to test everything, let's temporarily add a dispatch of a test action. Run the application. Yarn. Start. Open the console and you should see the following message. Redux logger automatically logs all the messages with the previous state, the action object and the next state.

[01:01 - 01:19] Right now we don't really process any actions yet, especially not the test action, but we can already see how the output would look like. So first we see what was the state before we dispatched the action. Then we have the action object. We can see the type and if there would be something like payload, we would see it here as well.

[01:20 - 01:35] And then we see the next state. So we can observe how did the state change after we dispatched this action. In my opinion, often it's much more convenient to have this sort of logging instead of having to always look at the Redux dev tools interface.