I’m used to using Redux and more recently Redux Toolkit for global state management in React, however along with state management libraries such as Mobx there’s another library of interest to me, named Zustand. Let’s see how to set up and project and use Zustand and take a very high level look at how to set-up a project with Zustand…<\/p>\n
Create yourself a React application, as usual I’m using TypeScript.<\/p>\n
\r\nimport { create } from "zustand";\r\n\r\ninterface CounterState {\r\n counter: number;\r\n increment: () => void;\r\n decrement: () => void;\r\n}\r\n\r\nexport const useCounterStore = create<CounterState>(set => ({\r\n counter: 0,\r\n increment: () => set(state => ({ counter: state.counter + 1 })),\r\n decrement: () => set(state => ({ counter: state.counter - 1 })),\r\n}));\r\n<\/pre>\n<\/li>\n<\/ul>\nThe above creates a simple store, with state and methods to interact with the state. As we’re using TypeScript, we’ve declared the interface matching our state.<\/p>\n
To use this state we simply use the hook like this (change App.tsx to look like the following)<\/p>\n
\r\nimport '.\/App.css';\r\nimport { useCounterStore } from ".\/store";\r\n\r\nfunction App() {\r\n const { counter, increment, decrement } = useCounterStore();\r\n\r\n return (\r\n <div className="App">\r\n <button onClick={increment}>+<\/button>\r\n <div>{counter}<\/div>\r\n <button onClick={decrement}>-<\/button>\r\n <\/div>\r\n );\r\n}\r\n\r\nexport default App;\r\n<\/pre>\nWe can also get slices of our state using the hook like this<\/p>\n
\r\nconst counter = useCounterStore(state => state.counter);\r\n<\/pre>\nBefore we move on, unlike RTK we need to enable redux devtools if we want to view the state in the Redux DevTools in our Browser, so to add the dev tool extensions do the following<\/p>\n
\r\nimport { create } from "zustand";\r\nimport { devtools } from "zustand\/middleware"\r\nimport type {} from "@redux-devtools\/extension";\r\n\r\ninterface CounterState {\r\n counter: number;\r\n increment: () => void;\r\n decrement: () => void;\r\n}\r\n\r\nexport const useCounterStore = create<CounterState>()(\r\n devtools (\r\n set => ({\r\n counter: 0,\r\n increment: () => set(state => ({ counter: state.counter + 1 })),\r\n decrement: () => set(state => ({ counter: state.counter - 1 })),\r\n }),\r\n {\r\n name: "counter-store",\r\n }\r\n )\r\n);\r\n<\/pre>\n<\/li>\n<\/ul>\nZustand also has the ability to wrap our global state within a persistence middleware. This allows us to save to various types of storage. We simply wrap our state in persist<\/em> like this <\/p>\n\r\nimport { devtools, persist } from "zustand\/middleware"\r\n\r\nexport const useCounterStore = create<CounterState>()(\r\n devtools (\r\n persist (\r\n set => ({\r\n counter: 0,\r\n increment: () => set(state => ({ counter: state.counter + 1 })),\r\n decrement: () => set(state => ({ counter: state.counter - 1 })),\r\n }),\r\n {\r\n name: "counter-store",\r\n }\r\n )\r\n )\r\n);\r\n<\/pre>\nBy default (as in the above code) this state will be persisted to localStorage.<\/p>\n
Go check your Application | Local Storage in Edge or Chrome developer tools, for example for Local Storage I have a key counter-store<\/em> with the value {“state”:{“counter”:4},”version”:0}<\/em>.<\/p>\n