Building a Basic Store with `create`

Hello! Welcome back to our course on Zustand.

In our last lesson, we successfully set up a minimal React project using Vite. This "sandbox" is now our clean slate, ready for us to start exploring Zustand's core features.

Today, we'll write our first piece of Zustand state management code. We will focus on the most fundamental function in the library: create. You will learn how to use it to define a "store," which is a self-contained unit holding both your application's state (the data) and the actions (the functions) that can modify that state.

Learning Outcome: By the end of this lesson, you will be able to create a basic store using the create function, defining both state and actions.

1. The Core of Zustand: The create Function

Everything in Zustand begins with the create function. You import it from the zustand library, and it's the tool you'll use to build all your stores. A store is essentially a hook that you can use in any component to access and manipulate state.

The create function takes a single argument: a "state creator" function. This function is where you define the initial state and the actions that operate on that state. The state creator function, in turn, receives a crucial argument: the set function, which is the primary mechanism for updating your store's state.

To get a formal understanding, let's look at the official documentation.

In short, the basic pattern is:
const useStore = create((set) => ({ ...your state and actions here... }))

2. Defining the Store's Shape with TypeScript

Given your expertise with TypeScript, we'll follow the best practice of defining the store's structure with an interface before implementing it. This provides type safety, autocompletion, and makes the store's API explicit and easy to understand.

The following video demonstrates this process clearly. It defines a Store type that includes both state properties (todos, newTodo) and action signatures (addTodo, setNewTodo).

3. Creating the Store: Initial State and Actions

Now let's put this into practice. We will create our first store in the zustand-sandbox project you set up previously.

1. In your project, create a new file: src/store/counterStore.ts.
2. We'll start by defining the interface and the initial state.

The video below walks through creating a simple counter store. It demonstrates how to use the create function, pass the TypeScript type, and return an object that represents the initial state of the store.

Defining Actions

Actions are functions defined within your store that modify the state. They use the set function provided by create. You can think of them as the public API for changing your store's data.

There are two primary ways to use set:

1. Passing an object: set({ count: 0 }). This merges the object into the existing state. It's useful for simple, direct state updates.
2. Passing a function: set(state => ({ count: state.count + 1 })). This is the recommended way to update state that depends on its previous value. Zustand passes the current state to your function, and you return a new object with the updated values. This pattern avoids race conditions and is analogous to the functional update form of React's useState.

The next part of the tutorial clearly demonstrates how to add actions to the store to increment and decrement the count.

For a textual reinforcement of this concept, the article "How to use Zustand" provides a concise explanation of actions.

4. Your First Zustand Store

Now, let's combine these concepts and write the full code for our counterStore. Add the following content to your src/store/counterStore.ts file.

import { create } from 'zustand';

// 1. Define the interface for the store's state and actions
interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

// 2. Create the store using the `create` function
export const useCounterStore = create<CounterState>((set) => ({
  // Initial state
  count: 0,

  // Actions
  increment: () => set((state) => ({ count: state.count + 1 })),

  decrement: () => set((state) => ({ count: state.count - 1 })),
  
  reset: () => set({ count: 0 }),
}));

Let's break down this code:

• We define the CounterState interface, making the shape of our store explicit.
• We call create<CounterState> to create a typed store.
• The function passed to create returns an object.
• count: 0 is our initial state.
• increment and decrement are actions that use the functional set pattern because their logic depends on the previous count.
• reset is an action that uses the object set pattern for a simple, direct update.

You have now successfully created your first Zustand store! In the next lesson, we will learn how to connect this store to a React component to read the state and call these actions.

Conclusion

In this lesson, we took a major step into the world of Zustand. You've learned the most critical concepts for getting started:

• create is the central function for building stores.
• A store is an object containing both state (the data) and actions (functions to modify the data).
• Using TypeScript interfaces to define the store's shape is a best practice for robust applications.
• Actions use the set function to update state, preferably with an updater function (set(state => ...) ) for state transitions that depend on previous values.

Next Lesson Preview:
In our next lesson, we will learn how to access state and actions from the store within a React component using the generated hook. We will bring our counterStore to life by displaying the count and wiring up buttons to our increment, decrement, and reset actions.