handleAction() — react Function Reference

Architecture documentation for the handleAction() function in server.tsx from the react codebase.

Function tsx BabelCompiler Optimization calls 1

Entity Profile

BabelCompiler→ Optimization→ handleAction() — react Function Reference

Dependency Diagram

graph TD
  eeec41c8_f382_b987_ad4a_7541ae858115["handleAction()"]
  a79cd622_5834_df3e_54e0_56ba202376a6["server.tsx"]
  eeec41c8_f382_b987_ad4a_7541ae858115 -->|defined in| a79cd622_5834_df3e_54e0_56ba202376a6
  076cff57_541c_4f9e_ddd8_39161a3860b3["render()"]
  eeec41c8_f382_b987_ad4a_7541ae858115 -->|calls| 076cff57_541c_4f9e_ddd8_39161a3860b3
  style eeec41c8_f382_b987_ad4a_7541ae858115 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/flight-parcel/src/server.tsx lines 87–128

async function handleAction(
  req: ExpressRequest,
  res: ExpressResponse,
  component: ReactElement,
) {
  let id = req.get('rsc-action-id');
  let request = new Request('http://localhost' + req.url, {
    method: 'POST',
    headers: req.headers as any,
    body: Readable.toWeb(req) as ReadableStream,
    // @ts-ignore
    duplex: 'half',
  });

  if (id) {
    let action = await loadServerAction(id);
    let body = req.is('multipart/form-data')
      ? await request.formData()
      : await request.text();
    let args = await decodeReply<any[]>(body);
    let result = action.apply(null, args);
    try {
      // Wait for any mutations
      await result;
    } catch (x) {
      // We handle the error on the client
    }

    await render(req, res, component, result);
  } else {
    // Form submitted by browser (progressive enhancement).
    let formData = await request.formData();
    let action = await decodeAction(formData);
    try {
      // Wait for any mutations
      await action();
    } catch (err) {
      // TODO render error page?
    }
    await render(req, res, component);
  }
}