Redux DevTools without Redux

Note that window.devToolsExtension has been renamed to window.__REDUX_DEVTOOLS_EXTENSION__.

Even if you’re using Redux, seldom you have a single source of truth. There’re local states in your React components or some effects in thunks and sagas, which you want to track.

Starting from 2.0, you can integrate Redux DevTools Extension with any architecture which handles the state. You can now have multiple stores or different instances for every React component’s local state.

There are two ways of interacting with it.

Create a Redux store right from the extension

Redux is just about pure functions. If you’re still wondering whether you need it for your use case or just having React local states would be enough, better to start with the latter, and just move the logic from React components.

For example, here’s a simple React counter application:

We can move the logic outside the component into a reducer which is just a pure function, and, instead of calling setState directly, use a function called dispatch. Now we have a Redux architecture without importing Redux:

Redux is not a framework, it’s just a concept, rather simple and yet powerful. A significant advantage of our new architecture, is that by exporting the reducer function, we can test it easily.

Using Redux DevTools with such architecture is just about passing this reducer function to window.devToolsExtension:

We subscribed to this new created store in order to implement time travelling and other monitor actions, which is just this.setState. Also, in case we’re using the extension, we’ll dispatch the action through our store, instead of calling the reducer directly.

The source of the example can be found here.

Communicating with the extension directly

Another way of interacting with the extension, would be not to use Redux at all, and just send every new state to the extension.

It’s rather useful in order to implement a connector for your specific architecture. For example, there are connectors for Mobx, Horizon, CojureScript, @ngrx/store, you can just import. Keep them coming!

The extension’s API offers different ways to send the actions and states. Even though you can just send every new state by calling window.devToolsExtension.send(action, state), better is to connect to the extension, so you’ll have more than just one-way messaging.

Here’s how our counter example will look like:

In order to implement monitors actions (specifically for your architecture), subscribe to the extension:

Here we have only time travelling, other monitor actions (if needed) can be implemented like in this connector.

The source of our second example is here.

What about React Native, Node…?

For Redux we have Remote Redux DevTools, which sends data to the extension remotely. So, you can get actions even from the user side.

In case you don’t use Redux, there’s RemoteDev library. It has the same API as the extension (from the example above). Moreover for web applications, by default, it will try to communicate with the extension directly. Here are examples for different flux architectures.

What for?

If you’re not sure whether you need Redux DevTools for your application, watch my react-europe talk or just this: