Redux Logger: How to Monitor Problems in React Redux Apps
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md
file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
Lesson Transcript
[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.
This lesson preview is part of the Fullstack React with TypeScript Masterclass course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Fullstack React with TypeScript Masterclass, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
![Thumbnail for the \newline course Fullstack React with TypeScript Masterclass](/_next/image?url=https%3A%2F%2Fs3.amazonaws.com%2Fassets.fullstack.io%2Fn%2F20220425171607321_CoverImage_FSReactWTypeScript_Masterclas.png&w=3840&q=75)