在表单提交时调用异步 redux 操作创建者

Question

在典型的 React/Redux 应用程序中，使用 redux-thunk 和异步操作创建者来触发 AJAX 请求并在该请求的启动/成功/失败时调度操作是很常见的。

但是，我找不到将此类函数与反应最终形式集成的方法。它的 redux 提交示例是使用 react-redux-promise-listener，它会立即调度一个动作，但不允许我调用我的异步动作创建者。

是否可以将 react-final-form 与使用异步操作创建器执行提交操作的 redux 应用程序集成？我宁愿不必将我的 AJAX 逻辑移动到化简器中。

Answer 1

表单库关心的只是onSubmit函数返回一个Promise。如果调度使用自定义操作创建者创建的操作可以返回承诺(也许通过一些中间件？(，这就是 React Final Form 所关心的。promise 侦听器库更多地用于副作用中间件，如 Redux Saga。

Answer 2

检查此解决方案：

我的组件：

export function submitEdit(dataPath: string, payload: ActionWithCallback<number>): ActionWithDataPathBase<ActionWithCallback<number>> {
return {
type: constants.EDIT_SUBMIT,
dataPath,
payload
};

}

行动：

export function submitEdit(dataPath: string, payload: ActionWithCallback<number>): ActionWithDataPathBase<ActionWithCallback<number>> {
return {
type: constants.EDIT_SUBMIT,
dataPath,
payload
};

}

ActionWithCallBack：

export interface ActionWithCallback<T> {
data: T,
callback?: ((errors?: SubmissionErrors | undefined) => void)

}

传奇：

function* update(action: ActionWithDataPathBase<ActionWithCallback<number>>) {
try {
const formData: PeopleForUpdateModel = yield select((state: AppState) => get(state.forms, action.dataPath));
yield call(ajax.put, `/people/${action.payload.data}`, formData);
}
catch (error) {
if (action.payload.callback) {
const errors = handleFormErrors(error.response);
yield call(action.payload.callback, errors);
}
}
finally {
yield put(actions.changeValue("edit.isLoading", false));
}

}

HandleFormErrors 函数解析我的服务器对接受的最终表单错误格式 SubmitErrors 的响应