在 React Final Form 提交上调用 API

如何解决在 React Final Form 提交上调用 API

我正在使用 React Final Form，并且想在我的表单上单击“提交”时调用 API。

我正在尝试遵循“异步 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 Creators 定义的。这些在我的应用程序中的其他地方都很好，但它正在将它们连接到我完全坚持的表单提交。

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

Here is a simplified example on CodeSandbox

解决方法

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

composeEnhancers(applyMiddleware(thunk,reduxPromiseListener.middleware))

代替

composeEnhancers(applyMiddleware(reduxPromiseListener.middleware,thunk))

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