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。

相关文章

使用Python开发一个带EPUB转换功能的Markdown编辑器

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t
阅读更多...
Spring Shell 命令行实现交互式Shell应用开发

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S
阅读更多...
Python通过模块化开发优化代码的技巧分享

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版：拆分成模块让模块更强大：使用 __init__.py你一定会遇到的问题模www.
阅读更多...
Spring Security基于数据库的ABAC属性权限模型实战开发教程

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》：本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA
阅读更多...
使用Python开发一个简单的本地图片服务器

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经
阅读更多...
Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战：从入门到进阶优化1. MyBatis
阅读更多...
MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL？1.2 动态SQL的优点1.3 动态S
阅读更多...
Python基于wxPython和FFmpeg开发一个视频标签工具

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优
阅读更多...
利用Python开发Markdown表格结构转换为Excel工具

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark
阅读更多...
电脑win32spl.dll文件丢失咋办? win32spl.dll丢失无法连接打印机修复技巧

电脑win32spl.dll文件丢失咋办? win32spl.dll丢失无法连接打印机修复技巧

《电脑win32spl.dll文件丢失咋办?win32spl.dll丢失无法连接打印机修复技巧》电脑突然提示win32spl.dll文件丢失，打印机死活连不上，今天就来给大家详细讲解一下这个问题的解... 不知道大家在使用电脑的时候是否遇到过关于win32spl.dll文件丢失的问题，win32spl.dl
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2