/** * > [!NOTE] * > Install using `bunx shadcn@latest add @remix-utils/named-action`. * * > [!NOTE] * > This depends on React Router. * * It's common to need to handle more than one action in the same route, there are many options here like [sending the form to a resource route](https://sergiodxa.com/articles/multiple-forms-per-route-in-remix#using-resource-routes) or using an [action reducer](https://sergiodxa.com/articles/multiple-forms-per-route-in-remix#the-action-reducer-pattern), the `namedAction` function uses some conventions to implement the action reducer pattern. * * ```tsx * import { namedAction } from "remix-utils/named-action"; * * export async function action({ request }: Route.ActionArgs) { * return namedAction(await request.formData(), { * async create() { * // do create * }, * async update() { * // do update * }, * async delete() { * // do delete * }, * }); * } * * export default function Component() { * return ( * <> *
* * * * * > * ); * } * ``` * * This function can follow this convention: * * You can pass a FormData object to the `namedAction`, then it will try to find a field named `intent` and use the value as the action name. * * If, in any case, the action name is not found, the `actionName` then the library will try to call an action named `default`, similar to a `switch` in JavaScript. * * If the `default` is not defined it will throw a ReferenceError with the message `Action "${name}" not found`. * * If the library couldn't found the name at all, it will throw a ReferenceError with the message `Action name not found` * * @author [Sergio XalambrÃ](https://sergiodxa.com) * @module Server/Named Action */ import type { UNSAFE_DataWithResponseInit } from "react-router"; type ActionsRecord = Record