Zusty is a Zustand Dev Tool designed to facilitate the debugging of state management in your applications. It provides state snapshots, action logs, render time metrics, and a component tree showing which components are using state. With this information at hand debugging your Zustand code is easy!
Use the package manager to install our middleware - zustymiddleware.
For JavaScript:
npm i zustymiddlewareFor TypeScript follow the below command and refer to the instructions here: https://www.npmjs.com/package/zustymiddlewarets?activeTab=readme.
npm i zustymiddlewarets- Import zustymiddleware at the top of your store file
- Wrap your store in the middleware
- Before you export your store, add window.store = < your store name>
import zustymiddleware from 'zustymiddleware';
const useStore = create(
zustymiddleware((set) => ({
bears: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
}))
);
window.store = useStore;
export default useStore;Next, download the Zusty Chrome extension: link here
You are now ready to use our tool!
Upon opening Zusty you will see the action log, as well as state snapshots. Our state snapshot section features a toggle which allows users to switch between a JSON view and a list view depending on what is most convenient. The JSON view allows for easy visualization for nested objects, as well as the ability to collapse items to focus on what is being affected. A timestamp has been added to each snapshot so users can understand when each state change is occurring for debugging:
A tree button is available, displaying all the components in the user's application in a convenient tree-like view, enabling a comprehensive overview of the application's state management structure and facilitating efficient debugging and identification of data flow patterns:
To visualize the action log, time travel, and metrics select the action log button.
Here you can see each action that is changing state, the state before and after that action was completed, and the render time to update state after this action. Zusty adds dynamic highlighting to make it clear which action is being inspected when viewing previous and current state:
On each action we display either a green, yellow, or red dot indicating the performance of rendering times. We have a toggle option which users can select to see the exact render time to understand which actions are leading to issues if any:
There is also a store button that allows the user to conveniently see thier zustand store directly in the dev tool, as to see how these actions are actually affecting the state:
If you would like to test out these features using the demo application you can access the github repository here! https://github.com/DanaKaplan944/zustand-demo
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
- Adrian Insingo | Github: @adrianinsingo
- Brian JaeKook Lee | Github: @JaeBrian
- Dana Kaplan | Github: @DanaKaplan944
- Nancy Huang | Github: @itsnancyhuang
- William Kil | Github: @shinykoin
