在React Final Form提交时调用API

Question

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

我正在尝试遵循"Async Redux提交"。例子和被卡住。我正在使用来自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定义的。这些在我的应用程序的其他地方都很好，但它将它们连接到我完全卡住的表单提交。

我在这里看到过一个类似的问题，但没能理解答案(尽管它是由图书馆的作者!)，所以我希望有人能进一步帮助我。我对React和一般的web开发(c#)很陌生。. NET api和数据库是我的领域)，所以任何建议都是非常感谢的。谢谢!

下面是一个关于CodeSandbox

的简化示例

Answer 1

交换您的中间件在createStore的顺序似乎已经修复了它?

composeEnhancers(applyMiddleware(thunk, reduxPromiseListener.middleware))

不是

composeEnhancers(applyMiddleware(reduxPromiseListener.middleware, thunk))

不要问为什么。我已经三年没看过这些图书馆了。