Многоразовая форма конечного автомата

Question

Пытаясь обернуть голову вокруг xState и конечных автоматов в целом, мне было интересно, как, например, вы предоставили бы URL API для автомата формы, чтобы сделать его многоразовым. Мое текущее решение состоит в том, чтобы поставить его через withContext, но это не так.

Answer 1

Я думаю, у вас есть хорошее решение для повторного использования этой машины как есть. Вот пример из репозитория визуализатора xstate, который может помочь вам чувствовать себя более комфортно с вашим решением:

const invokeSaveGist = (ctx: AppMachineContext, e: EventObject) => {
  return fetch(`https://api.github.com/gists/` + ctx.gist!.id, {
    method: 'post',
    body: JSON.stringify({
      description: 'Generated by XState Viz: https://xstate.js.org/viz',
      public: true,
      files: {
        'machine.js': { content: e.code }
      }
    }),
    headers: {
      Authorization: `token ${ctx.token}`
    }
  }).then(async response => {
    if (!response.ok) {
      throw new Error((await response.json()).message);
    }

    return response.json();
  });
};

Как вы можете видеть, часть «dynamici c» URL-адрес также является производным от машинного контекста, конечно, это здесь гист-идентификатор, но он также может быть любой другой частью URL-адреса.

Другое решение, которое вы могли бы рассмотреть, хотя я бы не стал Я считаю, что это «лучшее» решение любым способом (возможно, на 3 строки меньше), заключалось бы в передаче apiUrl в качестве данных при отправке формы с send('SEND');. Так что вместо:

<form onSubmit={
    (e) => {
        e.preventDefault();
        send('SEND');
    }
}>

вы можете попробовать:

<form onSubmit={
    (e) => {
        e.preventDefault();
        send('SEND', { apiUrl: 'api/contact'});
    }
}>