Remix 开发小技巧（五）

最新推荐文章于 2025-09-01 13:31:31 发布

原创

最新推荐文章于 2025-09-01 13:31:31 发布 · 613 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

本文探讨了在Remix应用中使用类型安全Fetcher钩子实现RPC，包括资源路由、Zod验证、自定义提取器和暗模式主题切换，以提升用户体验。同时介绍了如何通过Cookie和matchMediaAPI处理用户首选配色方案的动态切换。

文章目录

类型安全的 Fetcher 钩子
黑暗模式主题切换

类型安全的 Fetcher 钩子

RPC 是一种远程过程调用，这是一种奇特的说法，表示“在服务器上运行的函数”。

他们现在正在经历一个鼎盛时期，gRPC、tRPC 和 Next.js Server Actions 等工具越来越受欢迎，并重新激发了对该模式的兴趣。

但我不建议将它们与 Remix 一起使用。

Remix 的工作方式与典型的 Web 框架略有不同。它的设计重点是渐进式增强和利用浏览器的强大功能。

通过使用 RPC 库，您将远离这些好处。

例如，不能使用 tRPC 路由器生成与基本 HTML 表单兼容的 Endpoints。

在 Next.js 服务器操作宣布之前，Next 框架从未真正承认数据突变是一回事。由于没有内置的支持，tRPC 非常适合该利基市场，两者成为开发的绝佳组合。

通过在编写 Remix 应用程序的方式中采用一些新习惯，您可以在不牺牲 Remix 优势的情况下获得 RPC 的好处。

一切从资源路由开始

Remix 源于 React Router，路由是它所说的语言。Remix 应用是通过创建路由来获取数据、处理突变、提供文件、呈现页面等来构建的。

在单个文件中，任何页面都可以通过指定操作函数成为 POST 端点。

export async function action({
   
    request }: ActionArgs) {
   
   
  const body = await request.formData()
  const title = body.get("title")
  if (!title) {
   
   
    throw new Response("Title is required", {
   
    status: 400 })
  }
  const description = body.get("description")
  const item = db.create({
   
   
    title: title.toString(),
    description: description?.toString(),
  })
  return json(item, {
   
    status: 201 })
}

或者，它可以通过指定加载程序函数成为 GET 终结点。

export async function loader({
   
    params }: LoaderArgs) {
   
   
  const item = db.get(params.id)
  if (item) {
   
   
    return json(item, {
   
    status: 200 })
  }
  throw new Response("Not found", {
   
    status: 404 })
}

这些函数的终结点 URL 是根据文件路径自动生成的。要调用这些函数，任何组件都需要知道它要调用的资源路由的 URL，然后它可以向该 URL 发出请求。

下面是一些以编程方式调用上一个 POST 终结点的客户端代码。

const body = new FormData()
body.append("title", title)
body.append("description", description)
const response = await fetch("/items", {
   
   
  method: "POST",
  body,
})