👋 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
versionv4.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! 👋
Top comments (0)