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

介绍

状态管理是 React 应用程序的基石之一。随着应用程序的复杂性增加，有效管理状态可能成为一项挑战。在大型应用程序中，Redux 或 Context API 等工具可能看起来过于复杂，包含大量样板代码和性能问题。

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

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

Zusstand 是什么？

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

Zusand 的主要优点：

最少的样板：不需要任何操作、减速器或提供者。

以性能为中心：仅当组件订阅的状态的特定部分发生变化时，组件才会重新渲染。

简单的 API：易于与任何 React 应用程序集成，包括 Next.js。

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

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

1. 安装 Zusstand

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

npm install zustand

2. 创建 Zusand 商店

Zusstand 允许您创建一个存储所有全局状态的存储。以下是管理简单计数器的存储示例。

在 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` 用于定义商店。

存储保存计数状态，增量是更新计数的函数。

3. 在 App Router 中使用 Store

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

为了举例说明，我们将应用程序的主页面定义为“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 (
    
      Home Page
      Count: {count}
      
      Go to Second Page
    
  );
};

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

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

export default function SecondPage() {
  const { count, increment } = useStore();
  return (
    
      Second Page Page
      Count: {count}
      
      Go to Home Page
    
  );
};

使用 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 中。

使用 Zusand 处理异步操作

您可以使用 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 将管理异步状态而无需任何额外的复杂性。

高级商店配置

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

为什么选择 Next.js？

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

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

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

结论

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

如果您正在使用 Next.js 13+ 并希望以高效的方式管理应用中的状态，Zusand 绝对值得考虑。尝试将其集成到您的项目中，然后让我知道它对您有何帮助！

快乐编码(っ◕‿◕)っ

CLIS.CC