使用 Convex 进行状态管理的指南

像 React 这样的现代前端框架让开发人员的状态管理变得更加容易，但是使用像 Convex 这样的解决方案进行状态管理却让它变得更加容易。在 React 中，组件的状态决定了 UI 的外观，虽然管理应用程序的状态变得相对简单，但全局状态概念仍然是开发人员的痛点。

例如，考虑跟踪与全局状态一起工作的金融交易的应用程序，所有客户端都可以实时更改和观察。此类应用程序很难开发，因为开发人员需要在应用程序之间同步状态并处理 ACID 属性。

Convex旨在通过提供包括数据存储、检索和突变在内的全栈解决方案来解决这个问题，所有这些都内置在用于全局状态管理的 SDK 中。它的无服务器方法是高效的，并且是一个高度可扩展的平台。Convex 是一个开发者优先的平台，其反应式架构与 React 非常吻合，并且 SDK 还支持乐观更新和订阅等功能。

在本教程中，我们将使用 Convex 构建一个全栈 Next.js 应用程序，用于全局状态管理。我们还将实现凸函数来查询和更新数据。在本教程结束时，我们将把最终的应用程序部署到 Vercel — 随时使用这个GitHub 存储库跟随本演练。

• 设置 Next.js 项目

• 设置凸

• 使用 Convex 添加状态管理

  • 定义架构

  • 实现凸函数

  • 用凸函数连接组件

  • 管理凸

• 保护应用程序

  • 创建 Auth0 应用程序

  • 设置 Auth0

  • 将 Auth0 与凸集成

• 部署到 Vercel

先决条件

您需要在计算机上安装 Node.js、npm 或 yarn，以及像 VS Code 这样的代码编辑器。您还需要一个 GitHub 帐户才能与 Convex 一起使用。

设置 Next.js 项目

该应用程序将允许用户查看现有帖子的列表并提交新的博客帖子。一篇博文将包含标题、正文和作者姓名。

首先，运行以下命令来设置一个新的 Next.js 项目：

npx create-next-app@latest凸示例 --typescript

在代码编辑器中打开项目并更新pages/index.tsx文件以显示表单以创建博客文章：

// pages/index.tsx
从“下一个”导入类型 { NextPage }
从“下一个/头”导入头
从 '../styles/Home.module.css' 导入样式
从“反应”导入 { useCallback, useState }
​
常量主页：NextPage = () => {
  const [作者，setAuthor] = useState('')
  const [title, setTitle] = useState('')
  const [body, setBody] = useState('')
​
  常量 createPost = async () => {
    // TODO: 在数据库中创建一个新帖子
    console.log({作者、标题、正文})
    // 提交后重置输入
    设置作者（''）
    集合体（''）
    设置标题（''）
  }
​
  返回 （
      <div className={styles.container}>
        <头部>
          <title>Next.js 凸面</title>
          <meta name="description" content="由创建下一个应用生成" />
          <link rel="icon" href="/favicon.ico" />
        </头>
​
        <主类名={styles.main}>
          <h1 className={styles.title}>
            欢迎使用{' '} 访问 <a href="https://nextjs.org">Next.js</a>
            <a href="https://convex.dev">凸</a>
          </h1>
          <输入
              类型={'文本'}
              价值={标题}
              占位符={'标题'}
              className={styles.inputStyles}
              onChange={(event) => setTitle(event.target.value)}
          />      
          <输入
              类型={'文本'}
              价值={作者}
              占位符={'作者'}
              className={styles.inputStyles}
              onChange={(event) => setAuthor(event.target.value)}
          />
          <文本区域
              价值={正文}
              行={5}
              placeholder={'帖子正文'}
              className={styles.inputStyles}
              onChange={(event) => setBody(event.target.value)}
          />
          <button className={styles.button} onClick={createPost}>
            创建帖子
          </按钮>
        </main>
      </div>
  )
}
​
导出默认主页

更新styles/Home.module.css如下：

/* 样式/Home.module.css */
。容器 {
  填充：0 2rem；
  显示：弯曲；
  弹性方向：列；
}
​
。主要的 {
  填充：4rem 0；
  弹性：