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

【问题标题】：Calling an async redux action creator on form submission在提交表单时调用异步 redux 操作创建者
【发布时间】：2018-12-08 14:35:02
【问题描述】：

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

但是，我找不到将这样的功能与 react-final-form 集成的方法。它的redux submission example 正在使用react-redux-promise-listener，它会立即分派一个动作，但不允许我调用我的异步动作创建者。

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

【问题讨论】：

标签： redux react-redux react-final-form final-form

【解决方案1】：

所有表单库关心的是onSubmit 函数返回一个Promise。如果调度使用自定义动作创建者创建的动作可以返回一个承诺（可能通过一些中间件？），这就是 React Final Form 关心的全部。 Promise 侦听器库更多用于副作用中间件，例如 Redux Saga。

【讨论】：

听起来像是在示例中有用的东西。我认为几乎每个进入 react+redux 的教程都使用 redux-thunk 进行 ajax 操作。

【解决方案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 函数将我的服务器响应解析为接受的最终表单错误格式SubmissionErrors

【讨论】：