💻使用 Next.js 和 React 中的 Zustand 掌握状态管理⚛

介绍

状态管理是 React 应用的基石之一。随着应用复杂度的提升，高效地管理状态可能成为一项挑战。在大型应用中，像 Redux 或 Context API 这样的工具可能显得过于复杂，包含大量样板代码，并且存在性能隐患。

在本文中，我们将探索极简状态管理库 Zusand，并将其与 Next.js（版本 13+）中的 App Router 集成。Zusand 提供了一种简单灵活的全局状态管理方法，无需 Redux 或 Context API 的开销，同时也非常适合现代 Next.js 应用程序。

阅读完本文后，您将清楚地了解 Zusand 如何与 App Router 配合使用，并准备在您自己的项目中实现它。

Zusand 是什么？

Zusand 是一个轻量级的状态管理库，可简化 React 应用程序中的状态处理。Zusand 无需 Reducer 或 Action，而是通过直接创建 Store 来实现轻松的状态管理。它非常适合那些希望避免 Redux 的复杂性但仍需要全局状态解决方案的应用程序。

Zusand 的主要优点：

• 最小样板：不需要任何动作、减速器或提供者。
• 以性能为中心：仅当组件订阅的状态的特定部分发生变化时，组件才会重新渲染。
• 简单的 API：易于与任何 React 应用程序集成，包括 Next.js。

使用 Next.js 中的 App Router 设置 Zusand

使用 App Router 设置 Next.js 中的 Zusand 非常简单。App Router 是新 Next.js 应用的默认设置，它利用了新的基于文件系统的路由以及对服务器端渲染的支持。

1.安装Zusand

首先在 Next.js 应用中安装 Zusand：

npm install zustand

2. 创建 Zusand 商店

Zusand 允许你创建一个 store 来保存所有全局状态。以下是一个管理简单计数器的 store 示例。

在 Next.js（App Router）中，建议将存储放在 pages 或 app 目录之外，通常放在 lib 或 stores 目录中。

在 lib 文件夹中创建 store.js 文件：

import { create } from 'zustand';
// Note: 'create' as a default export is a deprecated import. 


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

export default useStore;

create用于定义存储。
存储保存计数状态，increment 是更新计数的函数。

3. 在 App Router 中使用 Store

使用 Zustand，您可以直接在任何组件或页面中使用您的商店。以下是如何设置组件以使用商店的方法。

app/page.tsx为了举例说明，我们定义应用程序的主页。

import { useStore } from '@/lib/store'; // The store we defined earlier
import Link from 'next/link';

export default function Home() {
  const { count, increment } = useStore();
  return (
    <div>
      <h1>Home Page</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <Link href="/page2">Go to Second Page</Link>
    </div>
  );
};

由于 Zusand 的存储在各个页面之间是持久的，因此我们可以创建另一个页面app/page2.tsx，并且两个页面的状态都会保留和更改：

import { useStore } from '@/lib/store' 

export default function SecondPage() {
  const { count, increment } = useStore();
  return (
    <div>
      <h1>Second Page Page</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <Link href="/">Go to Home Page</Link>
    </div>
  );
};

使用 Zustand 保持状态

您可以使用 Zustand 在浏览器会话之间持久保存部分状态。以下是我们将 darkMode 设置持久保存到 localStorage 的示例：

// lib/store.ts
import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware'

const usePersistentStore = create(
 persist((set) => ({
    darkMode: false,
    toggleDarkMode: () => set((state) => ({ darkMode: !state.darkMode })),
  }),
  { name: 'persistent-store' } // Keep the store persistent on localStorage, a storage prop is optional (localStorage chosen by default)
 ), 
);

export default useStore;

这样，即使用户刷新或关闭应用程序后，darkMode 状态仍保留在 localStorage 中。

使用 Zustand 处理异步操作

您可以使用 Zustand 存储中的异步函数来处理异步操作，例如从 API 获取数据。以下是一个例子：

// lib/store.ts
import { create }  from 'zustand';

const useStore = create((set) => ({
  data: null,
  fetchData: async () => {
    const response = await fetch('/api/data');
    const result = await response.json();
    set({ data: result });
  },
}));

export default useStore;

现在，您可以从任何组件调用 fetchData，并且 Zusand 将管理异步状态而无需任何额外的复杂性。

高级商店配置

Zusand 还允许您针对不同的关注点创建多个存储或使用中间件进行状态持久化、日志记录等。您可以封装存储逻辑以便在更大的应用程序中更好地组织。

为什么 Next.js 值得支持？

1. 简化的状态逻辑 - Zusand 是一种极简的解决方案，无需定义 action、reducer 或使用提供程序包装组件。它简化了状态逻辑，使其易于在任何 Next.js 应用中使用。

2. 性能优化 - Zustand 高度优化了性能，确保组件仅在其订阅状态的特定部分发生变化时才重新渲染。这可以避免不必要的重新渲染，并保持您的应用快速响应。

3. 无缝集成 SSR 和 SSG - Zustand 与 Next.js 的 SSR 和 SSG 功能无缝协作。由于 Zustand 存储本身就是 JavaScript 对象，因此您可以在服务器端和客户端组件中直接使用它们，无需额外配置。

结论

Zusand 是 React 和 Next.js 应用的出色状态管理解决方案，尤其是在使用 App Router 时。其简约的设计与易于使用的 API 使其成为小型和大型应用程序的理想之选。无论您构建的是简单的应用还是复杂的系统，Zusand 都能让您以更少的样板代码和更佳的性能管理状态。

如果您正在使用 Next.js 13+，并且想要一种高效的方式来管理应用中的状态，那么 Zusand 绝对值得考虑。尝试将它集成到您​​的项目中，然后告诉我它的效果如何！

快乐编码(っ◕‿◕)っ