Redux & Redux Toolkit Course
Redux & Redux Toolkit
/
Intermediate

Logging Middleware

Definition

Middleware used specifically to console.log the state before an action, the action itself, and the state after the action, providing a clear history of state changes.

Explain Like I'm New

A security camera for your app. Every time an action happens, the logger prints a colorful message in your browser console showing exactly what caused the state to change.

Real World Example

The popular `redux-logger` package. It prints a beautiful collapsed group in the Chrome console for every single action dispatched.

Common Use Cases

  • •Local development debugging

Interactive Example

Loading...
Console output will appear here...

Interview Questions

basic

  • Should you leave Logging Middleware enabled in Production?

intermediate

  • Why do you need middleware to log actions? Why not just put `console.log` inside the Reducer?

Flash Cards

Question

Enabled in production?

Click to reveal answer
Answer

NO! It severely slows down the application and exposes internal state architecture to end-users. It should only run in development environments.

Question

Why not in reducer?

Click to reveal answer
Answer

Reducers MUST be pure functions with no side effects. `console.log` is technically a side effect. Furthermore, middleware can log the state BOTH before and after the reducer runs.