用Zustand轻松管理状态：Next.js和React中的状态管理秘籍

状态管理是React应用的基石之一。随着应用变得越来越复杂，高效管理状态可能变得越来越困难。在大型应用中，像Redux或Context API这样的工具可能显得过于繁琐，并伴随着大量样板代码和性能问题的担忧。

本文将探索 Zustand，一个简洁的状态管理库，并将其与 Next.js（版本 13+）的 App Router 集成。Zustand 提供了一种简单且灵活的方式来管理全局状态，而无需 Redux 或 Context API 的复杂性，而是提供一种更简单的方法，非常适合现代 Next.js 应用程序的需求。

读完本文后，你将明白 Zustand 如何配合 App Router 工作，并准备好在自己的项目中使用它。

Zustand是什么？

Zustand 是一个轻量级的状态管理库，它简化了 React 应用中状态的处理。无需 reducers 或 actions，Zustand 通过直接创建 store 实现简单易用的状态管理。对于希望避开 Redux 复杂性但仍需全局状态解决方案的应用程序来说，Zustand 就是个不错的选择。

Zustand 的主要好处：

• 最少的样板代码：无需动作、reducers 或提供者。
• 性能至上：组件仅在订阅的状态部分发生变化时重新渲染。
• 简单易用的 API：轻松集成到任何 React 应用程序中，比如 Next.js。

在 Next.js 中使用路由器设置 Zustand

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

1. 安装 Zustand 插件

首先，在你的 Next.js 应用中安装 Zustand。

在终端运行以下命令: npm install zustand 就完成了安装。

全屏模式 退出全屏

2. 创建一个 Zustand 库

Zustand 让你可以创建一个存储, 来存放所有的全局状态, 这里有一个简单的计数器存储示例。

在使用 Next.js (App Router) 时，建议将状态管理库保持在 pages 或 app 目录之外，通常放在 lib 或 stores 目录下。

在 lib 文件夹中创建一个名为 store.js 的文件：

    import { create } from 'zustand';
    // 注意：导入 'create' 的方式作为默认导出是不推荐的，已弃用。

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

    export default useStore;

进入全屏模式。退出全屏模式。

create 用来定义 store。
store 保存计数状态，increment 是一个更新计数的函数。

3. 在 App Router 中使用 Store.

有了 Zustand，你可以在任何组件或页面中直接使用你的 store。下面是如何设置组件来使用 store 的方法。

我们把应用的主页面定义为 app/page.tsx，举个例子。

    import { useStore } from '@/lib/store'; // 我们之前定义的那个 store
    import Link from 'next/link';

    export default function Home() {
      const { count, increment } = useStore();
      return (
        <div>
          <h1>首页</h1>
          <p>计数器: {count}</p>
          <button onClick={increment}>增加计数</button>
          <Link href="/page2">进入第二页</Link>
        </div>
      );
    };

全屏 退出全屏

因为 Zustand 的 store 能跨页面持久化，我们可以在 app/page2.tsx 页面添加内容，并且状态会在两个页面之间保持和更新。

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

export default function SecondPage() {
  const { count, increment } = useStore();
  return (
    <div>
      <h1>第二个页面</h1>
      <p>计数: {count}</p>
      <button onClick={increment}>增加计数</button>
      <Link href="/">返回首页</Link>
    </div>
  );
};

进入全屏模式，退出全屏模式.

使用 Zustand 状态管理

你可以使用Zustand来在浏览器会话之间保存部分状态。这里有一个例子，我们将darkMode设置保存到localStorage中。

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

    const usePersistentStore = create(
     persist((set) => ({
        深色模式: false,
        切换深色模式: () => set((state) => ({ 深色模式: !state.深色模式 })),
      }),
      { name: 'persistent-store' } // 使 store 在 localStorage 中保持持久性，存储属性是可选的（默认为 localStorage）
     ), 
    );

    export default usePersistentStore;

进入全屏模式。退出全屏模式。

这样一来，即使用户刷新或退出应用程序，暗模式仍然保存在本地存储中。

用 Zustand 处理异步操作

你可以在你的 Zustand 存储中使用异步函数来处理比如从 API 获取数据这样的异步任务。下面是一个例子：

    // 引入create函数从zustand包
    import { create } from 'zustand';

    // 创建一个store实例
    const useStore = create((set) => ({
      // 初始化数据为空
      data: null,
      // 异步获取并处理数据
      fetchData: async () => {
        const response = await fetch('/api/data');
        // 获取响应的JSON结果
        const result = await response.json();
        // 更新store中的数据
        set({ data: result });
      },
    }));

    // 导出默认的store实例
    export default useStore;

全屏 全屏退出

现在，你可以在任何组件中调用这个fetchData函数，Zustand会轻松管理其异步状态，而无需任何额外复杂的操作。

高级商店设置

Zustand 允许你为不同的关注点或需求创建多个 store，也可以使用中间件来实现状态持久化、日志记录等。你可以在较大的应用中将 store 逻辑封装以实现更好的组织。例如，状态持久化、日志记录等功能。

为什么要用 Zustand 在 Next.js 中？

1. 简化的状态逻辑 - Zustand 是一个极简的解决方案，无需定义动作、reducers 或包裹组件以提供者。它以一种简单的方式简化了状态逻辑，使其在任何 Next.js 应用中都易于使用。

2. 性能优化 - Zustand 在性能优化方面做得非常好，确保组件仅在相关状态变化时才会重新渲染。这可以避免不必要的重新渲染，让您的应用保持快速响应。

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

Zustand 是一个非常适合 React 和 Next.js 应用（特别是使用 App Router 时）的状态管理工具。它结合了极简的设计和易用的 API，使其适用于不论规模大小的应用。无论是构建简单应用还是复杂系统，Zustand 都让你用更少的样板代码和更好的性能来管理状态。

如果你正在使用 Next.js 13 及以上版本，并且想要一种高效的方法来管理应用程序中的状态值，那么 Zustand 绝对是一个不错的选择。试着将它集成到你的项目中，并告诉我它在你的项目中表现如何！

希望你喜欢编程 (っ◕‿◕)っ