To create your first Zustand store, you start by defining a function that calls the create function from Zustand. This function returns a custom hook you can use in your React components. The store holds your application's state and provides actions to update that state. Here is a walkthrough of how to define a simple store with both state and actions.

Begin by importing create from the Zustand package. Then, define the store by passing a function to create. Inside this function, return an object that contains your state variables and any actions (functions) that modify those variables. For example, if you want to track a simple counter, you might define a state variable called count and an action called increment that increases the value of count.

import { create } from "zustand";

const useCounterStore = create((set) => ({
  count: 0,
  increment: () =>
    set((state) => ({
      count: state.count + 1,
    })),
}));

In this example, count is the state, and increment is an action that updates the state. The set function allows you to update the state based on the previous state.

Once you have defined your store, you can use it inside a functional React component. To do this, call the custom hook (in this case, useCounterStore) inside your component. You can use destructuring to access the state and actions you need.

For instance, if you want to display the current value of count and provide a button to increment it, your React component might look like this:

function Counter() {
  const { count, increment } = useCounterStore();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

When the Increment button is clicked, the increment action is called, updating the count in the store. Because Zustand hooks are reactive, your component will automatically re-render with the new value of count. This pattern makes it easy to share and manage state across multiple components, since any component can use the same store hook to access or update the shared state.