Question

在典型的React / Redux应用中，很普遍使用redux-thunk and async action creators来触发AJAX请求并针对该请求的开始/成功/失败调度动作。

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

是否可以将react-final-form形式与使用异步动作创建者执行提交动作的redux应用集成？我希望不必将我的AJAX逻辑转移到reducers中。

Answer 1

所有表单库关心的是onSubmit函数返回一个Promise。如果调度由您的自定义动作创建者创建的动作可以返回承诺（也许通过某种中间件？），那就是React Final Form所关心的。承诺侦听器库更多地用于副作用中间件，例如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操作创建者

2 个答案: