Вызов API при отправке окончательной формы React

Я использую React Final Form и хочу вызвать API при нажатии кнопки «Отправить» в моей форме.

Я пытаюсь следовать примеру, используя Async Redux Submission, и застреваю . Я использую MakeAsyncFunction из response-redux-prom-listener и можно увидеть, как действие, определенное в start, отправляется, но изо всех сил пытается понять, что должно его поднять, чтобы что-то с ним сделать, т.е. вызвать этот API, который я хочу использовать.

Упрощенный код формы ниже:

<MakeAsyncFunction
  listener={promiseListener}
  start={'FORM_SUBMIT'}
  resolve={'FORM_COMPLETE'}>
  {submit_form => {
      return (
          <Form onSubmit={submit_form}
              render={({ submitting, handleSubmit }) => (
                  <form onSubmit={handleSubmit}>
                      <Paper>
                          <Grid container>
                              <<fields>>
                          </Grid>
                          <Grid>
                              <Button type="submit"
                                      disabled={submitting}>
                                  Submit
                              </Button>
                          </Grid>
                      </Paper>
                  </form>
              )} />
      );
  }}
  </MakeAsyncFunction>

У меня есть Reducer, который может выполнять это действие, но я знаю, что делать такие вещи, как внешние вызовы внутри Reducers, - плохая практика, поэтому я избегаю этого.

Что мне делать, чтобы обработать это отправленное действие?

Я использую промежуточное программное обеспечение Redux-Thunk для выполнения вызовов API, которые определены с помощью Action Creators. Они хороши в другом месте в моем приложении, но они подключают их к отправке формы, на которой я полностью застрял.

Я видел, что аналогичный вопрос задавали здесь, но не понял ответа (хотя это автор библиотеки!), поэтому я надеялся, что кто-то сможет мне помочь. Я новичок в React и в веб-разработке в целом (C # .NET API и базы данных - это больше моя область), поэтому я очень благодарен за любые советы. Спасибо!

Вот упрощенный пример на CodeSandbox


person Matt Holland    schedule 21.01.2021    source источник
comment
было бы неплохо, если бы вы могли поделиться кодом.   -  person Erick    schedule 21.01.2021
comment
Я добавил свой код MakeAsyncFunction и Form   -  person Matt Holland    schedule 21.01.2021
comment
Да, CodeSandbox стоил бы тысячи слов.   -  person Erik R.    schedule 21.01.2021
comment
@ErikR. Я добавил ссылку CodeSandbox на упрощенный пример приложения. Надеюсь, все в порядке, я никогда раньше этим не пользовался, извините!   -  person Matt Holland    schedule 21.01.2021


Ответы (1)


Поменяв местами промежуточное ПО в createStore, кажется, это устранило?

composeEnhancers(applyMiddleware(thunk, reduxPromiseListener.middleware))

вместо того

composeEnhancers(applyMiddleware(reduxPromiseListener.middleware, thunk))

Не спрашивай меня почему. Я не заглядывал в эти библиотеки уже 3 года.

person Erik R.    schedule 22.01.2021
comment
Извините, я не понимаю, что вы имеете в виду - мне нужно что-то, что прослушивает отправленное действие из отправки формы, изменение порядка промежуточного программного обеспечения этого не делает? Нужно ли мне добавлять что-то еще помимо их замены? - person Matt Holland; 24.01.2021
comment
Как я уже сказал, я не уверен, почему сработала замена порядка. У вас не работает? - person Erik R.; 25.01.2021
comment
Думаю, могла быть какая-то путаница - когда я ее оставил, песочница кода работала нормально. Я вернулся к нему сегодня, и он не загрузился, должно быть, кто-то его изменил. Теперь он у меня запущен. Но я все еще в замешательстве, я не уверен, что вы имеете в виду под словом «работа», изменение порядка промежуточного программного обеспечения не помогает мне прослушивать и обрабатывать действие из формы отправки нет. Это то, что я пытаюсь исправить. - person Matt Holland; 28.01.2021