1

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

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

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

4

2 回答 2

3

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

于 2018-07-01T11:13:11.760 回答
0

检查此解决方案：

我的组件：

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

于 2020-10-07T14:06:09.590 回答