Remix 开发小技巧（三）

2023-10-14 11:52
文章标签 技巧 开发 remix

本文主要是介绍Remix 开发小技巧（三），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 自动保存表单输入
    • useSubmit 钩子在导航时被取消，但 useFetcher 没有
    • 使用提取程序设置表单
    • 添加已退回的自动保存
  • 使用 Conform、Zod 进行表单验证
  • 使用 Zod 类型安全的环境变量
    • 为您的环境变量创建 Zod 数据结构
    • 修复进程.env以使用这些类型
    • 如果缺少任何环境变量，则崩溃

自动保存表单输入

过去，用户在使用Adobe Photoshop或Microsoft Word等应用程序时经常明确按下保存按钮是很常见的。

如果他们忘记保存，或者程序崩溃，或者他们覆盖了保存文件，他们将失去数小时或更长时间的工作。

但随着世界转向基于云的应用程序，自动保存成为常态，用户开始期望如果他们进行更改，它会被记住。

useSubmit 钩子在导航时被取消，但 useFetcher 没有

以编程方式提交表单的自然选择是 useSubmit 挂钩，但它不是自动保存表单的好选择。

Remix 使用全局导航状态，因此，如果您单击指向一个页面的链接，然后在加载之前单击指向其他页面的链接，则对第一页的请求将被取消。

不幸的是， useSubmit 也使用相同的导航状态。如果您用于 useSubmit 提交表单，然后在表单完成之前导航到其他页面，则表单提交将被取消。

这对于您明确提交的表单可能有意义，但对于预期会自动保存的输入，您不希望仅因为用户单击链接太快而保存失败。

每个 useFetcher 钩子都有自己的状态，因此您可以使用它来发出请求，如果用户导航离开，该请求不会被取消。

使用提取程序设置表单

不要使用常规的 Remix 组件，而是使用提取程序返回的组件 fetcher.Form 。

import { useFetcher } from "@remix-run/react"
import { conform, useForm } from "@conform-to/react"
export default function Example() {const fetcher = useFetcher()const [form, fields] = useForm<{email: stringname: string}>()return (<fetcher.Form method="POST" {...form.props}><input {...conform.input(fields.email)} /><input {...conform.input(fields.name)} /><button type="submit">{fetcher.state === "submitting"? "Saving…": "Save"}</button></fetcher.Form>)
}

添加已退回的自动保存

我们将使用增强的 useDebounceFetcher 钩子，它将自动对单个输入的提交进行去抖动。

如果用户快速键入并无缝地按 Tab 键转到每个下一个输入，在填写大表单时从不暂停，则很多时间可能会因未保存而工作而过去。为了避免这种情况，我喜欢确保每个输入都是单独自动保存的。

  • 如果他们在键入时暂停片刻，输入将被保存。
  • 如果他们按 Tab 键转到下一个输入，则上一个输入将立即保存，而无需等待去抖动延迟通过。

多亏了useDebounceFetcher钩子，我们只需要几行代码就可以做到这一点。

创建一个 emailFetcher，并在电子邮件输入的 onChange 和 onBlur 处理程序中调用它。

import { useFetcher } from "@remix-run/react"
import { conform, useForm } from "@conform-to/react"
import { useDebounceFetcher } from "./use-debounce-fetcher"
export default function Example() {const fetcher = useFetcher()const [form, fields] = useForm<{email: stringname: string}>()const emailFetcher = useDebounceFetcher()return (<fetcher.Form method="POST" {...form.props}><input{...conform.input(fields.email)}onChange={(event) => {emailFetcher.debounceSubmit(event.currentTarget.form,{replace: true,debounceTimeout: 500,},)}}onBlur={(event) => {emailFetcher.debounceSubmit(event.currentTarget.form,{replace: true,},)}}/><input {...conform.input(fields.name)} /><button type="submit">{fetcher.state === "submitting"? "Saving…": "Save"}</button></fetcher.Form>)
}

您还需要对名称输入执行相同的操作，但现在是考虑如何抽象并避免重复的好时机。

  • prop 级抽象 – 创建一个接受获取器并返回对象的 { onChange(), onBlur() } 函数可以很好地工作。这将类似于函数 conform.input 。不过，您仍然需要为每个输入创建一个钩子。
  • 组件级抽象 – 创建一个输入组件，然后在组件中创建提取器和事件处理程序。

我喜欢组件级抽象，因为它将所有内容都保存在一个地方，它还提供了一个添加其他功能或放置Tailwind CSS的地方。

function CustomInput(props: React.InputHTMLAttributes<HTMLInputElement>,
) {const fetcher = useDebounceFetcher()return (<inputclassName="block w-96 rounded border border-gray-300 px-4 py-3 focus:ring-1 focus:ring-indigo-600"{...props}onChange={(event) => {fetcher.debounceSubmit(event.currentTarget.form, {replace: true,debounceTimeout: 500,})// optional: call the onChange prop if it existsprops.onChange?.(event)}}onBlur={(event) => {fetcher.debounceSubmit(event.currentTarget.form, {replace: true,})props.onBlur?.(event)}}/>)
}

现在，您可以使用去抖动输入组件代替常规输入，它将自动保存更改和模糊。

return (<fetcher.Form method="POST" {...form.props}><DebouncedInput {...conform.input(fields.email)} /><DebouncedInput {...conform.input(fields.name)} /></fetcher.Form>
)

使用 Conform、Zod 进行表单验证

Conform 是一个表单验证库，可帮助您使用服务器端验证和客户端错误处理构建表单。它与Remix和Zod配合得很好。

使用 Conform，您可以使用 Zod 表示您的表单架构。

import { z } from "zod"
const schema = z.object({title: z.string(),description: z.string().optional(),status: z.enum(["todo", "doing", "done"]),
})

在您的表单组件中，使用 Conform 的 useForm 钩子来获取使表单工作所需的道具。

  • 该方法 onValidate 是我们使用它使用 zod 模式的地方。
  • lastSubmission 道具从动作中获取响应，以便它可以为我们处理错误。
import { conform, useForm } from "@conform-to/react"
import {getFieldsetConstraint,parse,
} from "@conform-to/zod"
export default function Example() {const actionData = useActionData<typeof action>()const [form, fields] = useForm({id: "example",onValidate({ formData }) {return parse(formData, { schema })},lastSubmission: actionData?.submission,shouldRevalidate: "onBlur",})return ( … )
}

接下来，我们将使用该 fields 对象来获取表单中每个字段所需的道具。

  • 传递给 form.props 组件。
  • 每个输入都会获得一个自动生成的 HTML ID。传递 fields.title.id 到 htmlFor 道具上的
  • 传递到 conform.input(fields.title)

每个输入在 中 fields.title.errors 都有自己的错误列表。

export default function Example() {const [form, fields] = useForm({ … })return (<Form method="POST" {...form.props}><div><label htmlFor={fields.title.id}>Title</label><input {...conform.input(fields.title)} /></div><div><label htmlFor={fields.description.id}>Description</label><input {...conform.input(fields.description)} />{fields.description.errors ? (<div role="alert">{fields.description.errors[0]}</div>) : null}</div><div><label htmlFor={fields.status.id}>Status</label><select {...conform.select(fields.status)}><option value="todo">Todo</option><option value="doing">Doing</option><option value="done">Done</option></select></div><button type="submit"> Submit </button></Form>)
}

最后一步是创建一个将处理表单提交的操作。

  • 将 中的 @conform-to/zod parse 方法与架构一起使用
  • 失败的提交将具有空 value 属性，因此您可以使用该属性来处理错误。在响应中返回提交对象，以便表单可以显示错误。
  • 如果提交有效，则可以使用该 value 属性获取输入数据库所需的数据。
import { parse } from "@conform-to/zod"
export async function action({ request }: ActionArgs) {const formData = await request.formData()const submission = await parse(formData, { schema })if (!submission.value) {return json({ status: "error", submission },{ status: 400 },)}const { title, description, status } = submission.valueawait db.todos.create({title,description,status,})return redirect("/todos")
}

使用 Zod 类型安全的环境变量

环境变量是在运行时配置应用程序的一种方法。你可以告诉应用从环境中读取值，而不是将值硬编码到代码中。

这对于 API 密钥、数据库凭据和其他不希望存储在代码库中的敏感信息非常有用。

由于这些变量是在运行时提供的，而不是在构建时提供的，因此我们无法静态地保证将设置某些变量或它们将具有正确的类型。

这意味着，如果您尝试在 IDE 中访问 process.env ，它不会为您自动完成变量，并且您不会进行任何类型检查。当您尝试访问变量时，您需要检查以确保在使用之前已定义它。

创建名为 env.server.ts 的文件，我们将使用它来：

  • 如果缺少任何必需的环境变量，则在启动时使应用程序崩溃
  • 并为环境变量添加类型定义，以便我们可以在 IDE 中获得自动完成和类型检查

为您的环境变量创建 Zod 数据结构

为您的环境变量定义 Zod 架构。最简单的选择是将它们全部设置为 ，但如果需要 z.string() ，您可以通过格式检查和其他验证来获得更高级的服务。

import { z } from "zod"
const zodEnv = z.object({// DatabaseDATABASE_URL: z.string(),// CloudflareCLOUDFLARE_IMAGES_ACCOUNT_ID: z.string(),CLOUDFLARE_IMAGES_API_TOKEN: z.string(),// SentrySENTRY_DSN: z.string(),SENTRY_RELEASE: z.string().optional(),
})

修复进程.env以使用这些类型

默认情况下， process.env 只是一个具有未知值的普通对象。由于我们强制要求环境变量与我们的 Zod 模式匹配，因此我们可以告诉 TypeScript 将其视为 process.env 具有这些类型。

Zod的 TypeOf 实用程序会将我们的Zod模式转换为我们需要的Typescript类型。

import { TypeOf } from "zod"
declare global {namespace NodeJS {interface ProcessEnv extends TypeOf<typeof zodEnv> {}}
}

如果缺少任何环境变量，则崩溃

应用运行时无法修改环境变量。它们在启动时严格设置，因此如果不存在任何设置，我们将希望立即关闭应用程序。

try {zodEnv.parse(process.env)
} catch (err) {if (err instanceof z.ZodError) {const { fieldErrors } = err.flatten()const errorMessage = Object.entries(fieldErrors).map(([field, errors]) =>errors ? `${field}: ${errors.join(", ")}` : field,).join("\n  ")throw new Error(`Missing environment variables:\n  ${errorMessage}`,)process.exit(1)}
}

在应用程序中尽早导入此模块。

此代码在任何函数或类之外定义，因此它将在导入时立即运行。

如果你正在做一个Node/Express应用程序，最好的位置是在 server.ts 文件中，或者与Remix App Server一起。 entry.server.ts 中加入：

import "~/env.server"

完整代码：

// app/env.server.ts
import { z, TypeOf } from "zod"
const zodEnv = z.object({// DatabaseDATABASE_URL: z.string(),// CloudflareCLOUDFLARE_IMAGES_ACCOUNT_ID: z.string(),CLOUDFLARE_IMAGES_API_TOKEN: z.string(),// SentrySENTRY_DSN: z.string(),SENTRY_RELEASE: z.string().optional(),
})
declare global {namespace NodeJS {interface ProcessEnv extends TypeOf<typeof zodEnv> {}}
}
try {zodEnv.parse(process.env)
} catch (err) {if (err instanceof z.ZodError) {const { fieldErrors } = err.flatten()const errorMessage = Object.entries(fieldErrors).map(([field, errors]) =>errors ? `${field}: ${errors.join(", ")}` : field,).join("\n  ")throw new Error(`Missing environment variables:\n  ${errorMessage}`,)process.exit(1)}
}

这篇关于Remix 开发小技巧（三）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/210326。

相关文章

qt5cored.dll报错怎么解决? 电脑qt5cored.dll文件丢失修复技巧

qt5cored.dll报错怎么解决? 电脑qt5cored.dll文件丢失修复技巧

《qt5cored.dll报错怎么解决?电脑qt5cored.dll文件丢失修复技巧》在进行软件安装或运行程序时，有时会遇到由于找不到qt5core.dll,无法继续执行代码，这个问题可能是由于该文... 遇到qt5cored.dll文件错误时，可能会导致基于 Qt 开发的应用程序无法正常运行或启动。这种错
阅读更多...
mtu设置多少网速最快? 路由器MTU设置最佳网速的技巧

mtu设置多少网速最快? 路由器MTU设置最佳网速的技巧

《mtu设置多少网速最快?路由器MTU设置最佳网速的技巧》mtu设置多少网速最快？想要通过设置路由器mtu获得最佳网速，该怎么设置呢？下面我们就来看看路由器MTU设置最佳网速的技巧... 答：1500 MTU值指的是在网络传输中数据包的最大值，合理的设置MTU 值可以让网络更快！mtu设置可以优化不同的网
阅读更多...
Python实例题之pygame开发打飞机游戏实例代码

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,：本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部
阅读更多...
使用Python开发一个现代化屏幕取色器

使用Python开发一个现代化屏幕取色器

《使用Python开发一个现代化屏幕取色器》在UI设计、网页开发等场景中,颜色拾取是高频需求,：本文主要介绍如何使用Python开发一个现代化屏幕取色器,有需要的小伙伴可以参考一下... 目录一、项目概述二、核心功能解析2.1 实时颜色追踪2.2 智能颜色显示三、效果展示四、实现步骤详解4.1 环境配置4.
阅读更多...
MySQL JSON 查询中的对象与数组技巧及查询示例

MySQL JSON 查询中的对象与数组技巧及查询示例

《MySQLJSON查询中的对象与数组技巧及查询示例》MySQL中JSON对象和JSON数组查询的详细介绍及带有WHERE条件的查询示例,本文给大家介绍的非常详细,mysqljson查询示例相关知... 目录jsON 对象查询1. JSON_CONTAINS2. JSON_EXTRACT3. JSON_TA
阅读更多...
Python使用smtplib库开发一个邮件自动发送工具

Python使用smtplib库开发一个邮件自动发送工具

《Python使用smtplib库开发一个邮件自动发送工具》在现代软件开发中,自动化邮件发送是一个非常实用的功能,无论是系统通知、营销邮件、还是日常工作报告,Python的smtplib库都能帮助我们... 目录代码实现与知识点解析1. 导入必要的库2. 配置邮件服务器参数3. 创建邮件发送类4. 实现邮件
阅读更多...
Spring @RequestMapping 注解及使用技巧详解

Spring @RequestMapping 注解及使用技巧详解

《Spring@RequestMapping注解及使用技巧详解》@RequestMapping是SpringMVC中定义请求映射规则的核心注解,用于将HTTP请求映射到Controller处理方法... 目录一、核心作用二、关键参数说明三、快捷组合注解四、动态路径参数（@PathVariable）五、匹配请
阅读更多...
基于Python开发一个有趣的工作时长计算器

基于Python开发一个有趣的工作时长计算器

《基于Python开发一个有趣的工作时长计算器》随着远程办公和弹性工作制的兴起,个人及团队对于工作时长的准确统计需求日益增长,本文将使用Python和PyQt5打造一个工作时长计算器,感兴趣的小伙伴可... 目录概述功能介绍界面展示php软件使用步骤说明代码详解1.窗口初始化与布局2.工作时长计算核心逻辑3
阅读更多...
如何确定哪些软件是Mac系统自带的? Mac系统内置应用查看技巧

如何确定哪些软件是Mac系统自带的? Mac系统内置应用查看技巧

《如何确定哪些软件是Mac系统自带的?Mac系统内置应用查看技巧》如何确定哪些软件是Mac系统自带的？mac系统中有很多自带的应用，想要看看哪些是系统自带，该怎么查看呢？下面我们就来看看Mac系统内... 在MAC电脑上，可以使用以下方法来确定哪些软件是系统自带的：1.应用程序文件夹打开应用程序文件夹
阅读更多...
python web 开发之Flask中间件与请求处理钩子的最佳实践

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2