Zustand - better redux-devtools middleware

Pavlo Buidenkov — Wed, 16 Nov 2022 23:11:32 +0000

👋 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! 👋

Deskreen Introduction: Turn Any Device With Browser Into a Secondary Screen

Pavlo Buidenkov — Sat, 30 Jan 2021 19:33:45 +0000

Meet Deskreen - an open source app that turns any device with a web browser into a secondary screen for your computer. Built with web technologies and ElectronJS so it is cross-platform. It supports Windows, MacOS and Linux.

Website: https://deskreen.com

Why I made Deskreen?
It all started with me wanting to use my iPad as a secondary screen for my Macbook. But I found that it is already outdated to use 'Sidecar' - a MacOS built in feature for that purpose. I tried upgrading both of them, but it didn't help. The only option left was to buy a new iPad and even new Macbook, which I did not want to do. I also have a Windows PC and sometimes I need to use my iPad as second screen for it as well.

I tried to look for FREE solutions on internet, but I could not find anything that would fit my expectations. Besides, all methods using free software for screen sharing I found, were different for Windows, Mac and Linux. I got very confused about it. Then I got an idea of creating Deskreen.

I decided to make it free and open-source to help people to solve this problem. Deskreen works the same for Windows, MacOS and Linux.

Github repo: https://github.com/pavlobu/deskreen

Hope you like it!