在提交表单时调用异步 redux 动作创建器

Question

在典型的 React/Redux 应用程序中，使用 redux-thunk and async action creators 触发 AJAX 请求并在该请求的 start/success/failure 上调度操作是很常见的。

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

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

Answer 1

表单库只关心 onSubmit 函数 return 是 Promise。如果分派使用自定义动作创建者创建的动作可以 return 一个承诺（也许通过一些中间件？），这就是 React Final Form 所关心的。 promise listener 库更多的是用于副作用中间件，比如 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 函数将我的服务器响应解析为可接受的最终表单错误格式 SubmissionErrors

在提交表单时调用异步 redux 动作创建器

Calling an async redux action creator on form submission

redux

react-redux

final-form

react-final-form