全书目录

第三十一篇:Remix 完全指南 —— Web 原生航运港宇宙

十、`action`:作业柜台,所有写操作都从这里过

1 分钟 204 字 第 573 / 962 个阅读单元

如果 loader 是读窗口,action 就是写窗口。

典型写法:

tsx
export async function action({ request }: ActionFunctionArgs) {
  const formData = await request.formData();
  const name = formData.get("name");
  const type = formData.get("type");

  if (!name) {
    return json(
      { errors: { name: "船名不能为空" } },
      { status: 400 }
    );
  }

  const ship = await createShip({
    name: String(name),
    type: String(type),
  });

  return redirect(`/ships/${ship.id}`);
}

你要把 action 想成:

  • 新建
  • 编辑
  • 删除
  • 登录
  • 注销
  • 收藏
  • 点赞
  • 上传
  • 支付发起
  • 审批提交

这些本质都是“对服务器状态的修改”。

Remix 的关键体验在这里:

动作做完以后,Remix 会自动把相关 loader 重拉一遍,让 UI 重新和服务器对齐。

这就是为什么 Remix 经常不需要你自己维护一层复杂的客户端数据同步系统。