Adding zustand/nextjs integration #2818

danyi1212 · 2024-10-25T18:16:45Z

danyi1212
Oct 25, 2024

Hey zustand team!

I've been recently attempted to use Zustand in a Next.js project, and was annoyed with the amount of boilerplate code I had to copy / implement using the tutorial at https://zustand.docs.pmnd.rs/guides/nextjs#app-router.

Doing that, I've created a common utility for creating a Zustand store prepared for Next.js project, and thought it could be added to the project similar to the zustand/react integration, as like zustand/nextjs.

I would appreciate your feedback and ideas about this, as well as some help potentially contributing it into zustand 😁

What does it look like

The utility looks like this (copy-paste this as zustand-nextjs.tsx to your project)

"use client";

import { createStore, StateCreator, StoreApi } from "zustand/vanilla";
import { useStore as useStoreReact } from "zustand/react";
import React from "react";

interface StoreProviderProps {
  children: React.ReactNode;
}

function identity<T>(value: T) {
  return value;
}

type Selector<T, S> = (state: T) => S;

type SetStateInternal<T> = {
  _(
    partial:
      | T
      | Partial<T>
      | {
          _(state: T): T | Partial<T>;
        }["_"],
    replace?: false,
  ): void;
  _(
    state:
      | T
      | {
          _(state: T): T;
        }["_"],
    replace: true,
  ): void;
}["_"];

interface Create<T> {
  StoreProvider: React.FC<StoreProviderProps>;
  useStore: () => StoreApi<T>;
  useState: <S>(selector?: Selector<T, S>) => [S, SetStateInternal<T>];
}

export function create<T>(initializer: StateCreator<T, [], []>): Create<T> {
  const storeContext = React.createContext<StoreApi<T> | undefined>(undefined);

  const StoreProvider: React.FC<StoreProviderProps> = ({ children }) => {
    const storeRef = React.useRef<StoreApi<T>>();
    if (!storeRef.current) {
      storeRef.current = createStore(initializer);
    }
    return (
      <storeContext.Provider value={storeRef.current}>
        {children}
      </storeContext.Provider>
    );
  };

  function useStore() {
    const store = React.useContext(storeContext);
    if (!store) {
      throw new Error(
        "Zustand/next useStore must be used within StoreProvider",
      );
    }
    return store;
  }

  function useState<S>(
    selector: Selector<T, S> = identity as Selector<T, S>,
  ): [S, SetStateInternal<T>] {
    const store = useStore();
    const state = useStoreReact(store, selector);
    return [state, store.setState];
  }

  return { StoreProvider, useStore, useState };
}

Then you can simply create your store like this

"use client";

import { create } from "@/zustand-next";

interface TodoStore {
  todos: string[];
}

const store = create<TodoStore>(() => ({
  todos: ["Learn React", "Learn Next.js", "Learn Zustand"],
}));

export const useTodosStore = store.useStore;
export const useTodos = store.useState;
export const TodosStoreProvider = store.StoreProvider;

Install the provider in the layout.tsx or where ever your want:

import { TodosStoreProvider } from "@/stores/useTodosStore";

export default function RootLayout({children}: Readonly<{ children: React.ReactNode }>) {
  return (
    <html lang="en">
      <body>
        <TodosStoreProvider>{children}</TodosStoreProvider>
      </body>
    </html>
  );
}

Then use it inside your client components

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { useTodos, useTodosStore } from "@/stores/useTodosStore";

export const TodoList = () => {
  const store = useTodosStore();
  const [todos, setTodos] = useTodos((state) => state.todos);
  const [input, setInput] = useState("");

  const handleAdd = () => {
    // Update the store using the set function
    setTodos((state) => ({
      todos: [...state.todos, input],
    }));
  };

  const handleDelete = (index: number) => {
    // Or use the store functions directly
    store.setState((state) => ({
      todos: state.todos.filter((_, i) => i !== index),
    }));
  };

  return (
    <ol className="flex flex-col space-y-4">
      {todos.map((todo, index) => (
        <li key={index} className="flex flex-row space-x-2 items-center">
          <span className="text-lg flex-grow">
            #{index + 1} {todo}
          </span>
          <Button variant="destructive" onClick={() => handleDelete(index)}>
            Delete
          </Button>
        </li>
      ))}
      <li className="flex w-full max-w-sm items-center space-x-2">
        <Input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Add a new task"
          className="text-lg"
        />
        <Button onClick={() => handleAdd()}>Add</Button>
      </li>
    </ol>
  );
};

The full example is available at https://github.com/danyi1212/zustand-next

dai-shi · 2024-10-26T09:04:39Z

dai-shi
Oct 26, 2024
Maintainer

Actually, I would like to push this idea #2740.

0 replies

gideonsmila · 2024-10-28T08:22:46Z

gideonsmila
Oct 28, 2024

Very useful

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding zustand/nextjs integration #2818

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Adding zustand/nextjs integration #2818

danyi1212 Oct 25, 2024

What does it look like

Replies: 2 comments

dai-shi Oct 26, 2024 Maintainer

gideonsmila Oct 28, 2024

danyi1212
Oct 25, 2024

dai-shi
Oct 26, 2024
Maintainer

gideonsmila
Oct 28, 2024