Zustand - better redux-devtools middleware

👋 Hi all,

Today I wanted to share with you a small improvement that I've made for Zustand for local react state management.

Warning

NOTE: the feature described in this post is already included in zustand version v4.2.0. So go ahead and update your zustand version to use this feature. You can still read this post for fun.

Zustand is a great tool, and it has a built in redux devtools integration.
We all know that it can be used like this:
import { devtools } from 'zustand/middleware'
It already has great features built in out of the box, but lacks some functionality that you may be used to find in redux devtools.

Current zustand devtools middleware problem

Zustand is meant to be used to create as many stores as you want with create.
In current implementation in order to use a rewind feature of redux devtools extension, you will need to select in a dropdown different stores in which you can do time traveling. So switching back and forth for each store in redux devtools is not really convenient and you would want to have a time travel in one tab for all stores. Besides, redux-toolkit has this feature built in out of the box.

Demo with a current problem of zustand devtools middleware

Solution

In order to use one redux devtools extension connection for all your zustand stores you can use this package @pavlobu/zustand instead of zustand.

npm i @pavlobu/zustand

NOTE: this package can be used temporarily. Zustand developers may include @pavlobu/zustand devtools middleware feature in future with a PR that I’ve opened.. I will update this post in case it will be merged.

The @pavlobu/zustand has the same interface for zustand devtools middleware.
Just use
import { devtools } from '@pavlobu/zustand/middleware'
or
import { devOnlyDevtools } from '@pavlobu/zustand/middleware'
devOnlyDevtools can be used if you need redux devtools only for development builds. More details

Refer to this demo project on how to use @pavlobu/zustand

Demo of a solution. One redux devtools extension connection can be used for all zustand stores

That's it, hope you've enjoyed this tiny little improvement on an awesome zustand devtools middleware.
Stay tuned, because who knows, maybe his feature will be approved by zustand developers and will be included in the next release :)

Have a nice day! 👋