在 React Final Form 提交上调用 API

Posted 2023-02-22

【中文标题】在 React Final Form 提交上调用 API

【英文标题】：Calling an API on React Final Form submission

【发布时间】：2021-04-26 04:53:50

【问题描述】：

我正在使用 React Final Form，并希望在单击表单上的提交时调用 API。

我正在尝试遵循“Async Redux 提交”example 并卡住了。我正在使用来自react-redux-promise-listener 的MakeAsyncFunction，并且可以看到start 中定义的Action 正在被调度，但很难理解应该使用什么来处理它 - 即调用我想要的这个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，但我知道在 Reducer 中执行诸如外部调用之类的操作是不好的做法，因此我正在避免这种情况。

我应该怎么做来处理这个分派的动作？

我正在使用 Redux-Thunk 中间件进行 API 调用，这些调用是使用 Action Creator 定义的。这些在我的应用程序的其他地方都很好，但它把它们连接到我完全坚持的表单提交。

我看到here 提出了类似的问题，但无法理解答案（即使它是由图书馆的作者提出的！），所以我希望有人能够进一步帮助我。 我对 React 和 Web 开发很陌生（C#.NET API 和数据库更多是我的领域），因此非常感谢任何建议。谢谢！

Here is a simplified example on CodeSandbox

【问题讨论】：

如果你能分享一些代码会很好。

我已经添加了我的 MakeAsyncFunction 和 Form 代码

是的，一个 CodeSandbox 值一千字。

@ErikR。我已将 CodeSandbox 链接添加到应用程序的简化示例。希望没关系，我以前从未使用过，对不起！

【参考方案1】：

在createStore 中交换中间件的顺序似乎已经解决了？

composeEnhancers(applyMiddleware(thunk, reduxPromiseListener.middleware))

而不是

composeEnhancers(applyMiddleware(reduxPromiseListener.middleware, thunk))

不要问我为什么。我已经 3 年没有研究过这些库了。

【讨论】：

对不起，我不确定你的意思 - 我需要一些东西来监听表单提交中发送的操作，交换中间件的顺序不这样做吗？除了交换它们之外，我还需要添加其他东西吗？

正如我所说，我不确定为什么交换订单有效。它不适合你？

我认为可能存在一些混淆 - 当我离开它时，代码沙箱运行良好。我今天回去了，它没有加载，一定是有人改变了它。我现在已经让它运行起来了。但是我仍然很困惑，我不确定您所说的“工作”是什么意思，更改中间件的顺序并不能帮助我听取和处理表​​单提交号的动作。这就是我要真正解决的问题。