Zustand (State Manager) for React.js

Repository Menu

1. How do I run this project, João?
2. What's Zustand?
3. DevTools - Redux
4. Persist data from State into Client Storage
5. References

How do I run this project, João?

1. Install the package dependencies:

npm install

2. Then, run the development server:

npm start

3. Open http://localhost:3000 with your browser to see the app running;

What's Zustand?

• It's a pretty simple and easy state manager to use in your React apps;
• A pretty good alternative for Redux;
• Really small pieces of code;

DevTools - Redux

• You can manipulate and see the Zustand states live! Using a Chrome Extension and the devtools method provided by Zustand;

1. Check the commits here;
2. Install the Redux extension;
3. Then, you can check your browser:

• Initial State:

- State Diff (after inserting new people):

Persist data from State into Client Storage

• You can persist data from the Zustand state in the Client local storage, using the persist method provided by Zustand;

1. Check the commits here and here;
2. Then, you can check your browser at the Application tab - dev mode:

• undefined variable:

- user_settings variable:

References

• Official Repo and API Docs
• Creating Stores: Best Practices
• Splitting the store into separate slices
• Medium Blog