如果 loader 是读窗口,action 就是写窗口。
典型写法:
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 经常不需要你自己维护一层复杂的客户端数据同步系统。