Zustand Fundamentals: State, Actions, and Selectors

Hello! Welcome to your next lesson.

In our previous modules, we've built a strong foundation in RxJS, covering everything from Observables and operators to Subjects and their integration with React. Now, we're moving into Module 6, where we'll explore how to combine RxJS with a modern state management library to build powerful, scalable applications.

This lesson marks our first step into that integration by focusing on Zustand. The learning outcome for today is to create and manage a basic Zustand store, covering atomic state updates, actions, and selectors.

We'll start by understanding why a library like Zustand is useful, even in a world with React's built-in hooks. Then, we'll dive into its core API: creating a store, defining state and actions, and connecting it to your React components. By the end of this lesson, you'll have a solid grasp of Zustand's fundamentals, which will be the bedrock for our next lesson where we'll bridge Zustand with RxJS streams.

Given your extensive experience with React, you'll likely appreciate Zustand's minimalist approach and how it contrasts with more boilerplate-heavy libraries you may have used in the past.

---

1. The "Why": State Management in React

In any non-trivial React application, managing state that needs to be shared across many components is a central challenge. While React provides useState for local state and the Context API for "prop-drilling" avoidance, they both come with trade-offs, particularly around performance and boilerplate.

To understand the problem Zustand solves, please watch the beginning of the following tutorial. It provides a concise overview of the state management landscape in React.

As the video mentions, Zustand provides a way to create global state that is not tied to the component tree, avoiding the need for Provider wrappers and the performance issues they can cause.

For developers familiar with Redux, Zustand's architecture is refreshingly simple. It dispenses with concepts like dispatchers, action creators, and reducers in favor of a more direct, hook-based API.

The article "React State Management — using Zustand" provides a clear architectural comparison. The diagrams in the "Zustand vs. Redux" section visually summarize the difference in complexity.

This simplified model is a key reason for Zustand's growing popularity. It offers the power of a centralized store without the ceremonial overhead.

2. Creating a Zustand Store

At the heart of Zustand is the create function. It takes a single function as an argument and returns a custom hook that your components will use to interact with the store.

Let's see how to define a store. We'll continue with the "Zustand - Complete Tutorial" video, which demonstrates this with TypeScript, aligning with modern development practices.

As you saw, the process is straightforward:

1. Import create: import { create } from 'zustand'
2. Define the store's type (in TypeScript): This includes both state properties and the functions (actions) that will modify them.
3. Create the store: export const useMyStore = create<MyStoreType>()(...)
4. Provide the initializer function: This function returns an object containing the initial state values.

The function passed to create receives a set argument, which is the mechanism for updating state. We'll explore that next.

3. Interacting with the Store: Selectors and Actions

Once the store is created, you need to be able to do two things:

1. Read state from it (using Selectors).
2. Write state to it (using Actions).

Accessing State with Selectors

The hook returned by create (e.g., useCounterStore) is used inside your components to "select" pieces of state. The key principle is to only select the state your component actually needs. Subscribing to the entire store object can lead to unnecessary re-renders.

This practice is called using atomic selectors.

The following video segments demonstrate how to select state and explain the performance implications.

The core idea is that useCounterStore(state => state.count) creates a subscription only to the count property. The component will only re-render if count changes. In contrast, useCounterStore(state => state) would cause a re-render on any state change.

Updating State with Actions

Actions are functions defined within your store that modify the state. They use the set function provided by the create initializer.

The set function can be used in two ways:

1. set({ count: 1 }): Merges the provided object into the state. This is a "fire-and-forget" update.
2. set(state => ({ count: state.count + 1 })): Use when the new state depends on the previous state. This functional update form is safer as it guarantees you're working with the latest state.

You can also access the current state from within an action using the get() function, which is the second argument to the create initializer. This is useful for complex actions that need to read other state values without subscribing to them.

Let's see how to define and use actions.

To summarize the complete create signature:
create((set, get) => ({ ... }))

• set: The function to update state.
• get: The function to read the current state inside actions.

4. A Practical Example: To-Do List

Theory is great, but let's see it all come together. The following resource walks through building a complete to-do application. This example effectively demonstrates the concepts we've just covered:

• A store with both data (todos array) and actions (addTodo, toggleTodo, deleteTodo).
• Components that select state and actions from the store.
• How calling an action in one component correctly triggers a re-render in another.

5. Accessing the Store Outside Components

A powerful feature of Zustand, especially relevant for our upcoming RxJS integration, is the ability to interact with the store from outside the React component lifecycle. Since the store object itself is not a hook, you can call methods on it directly.

• useMyStore.getState(): Returns the current state.
• useMyStore.setState(): Updates the state, similar to the set function.

This allows for utility functions, services, or middleware to read from and write to your global state without needing to be part of the React tree.

---

Conclusion

In this lesson, we've established a solid foundation in Zustand. You now have the tools to create and manage centralized state in a React application with a clean and efficient API.

Key Takeaways:

• Simple but Powerful: Zustand provides global state management without the boilerplate of libraries like Redux or the performance pitfalls of the Context API.
• The create function: This is the entry point for creating a store. It returns a custom hook.
• State and Actions: A store contains both the state data and the actions (functions) that modify it using the set and get functions.
• Atomic Selectors: For optimal performance, components should select only the specific slices of state they need. This minimizes re-renders.
• Component-Independent: The store's state can be accessed and modified from outside of React components using getState() and setState(), making it highly flexible.

Next Lesson Preview:

Now that we understand how Zustand works, we're ready to bring RxJS back into the picture. In the next lesson, we will implement Zustand middleware to bridge actions with Observable streams. This will allow us to handle complex asynchronous side effects, like API requests, in a declarative and robust way, directly addressing your goal of applying RxJS to real-world state management challenges.