Question

我正在尝试在保存过程中显示UI Overlay。我使用thunk调度ui更改，但问题是它在重新呈现之前等待Promise解析。我的代码中有一个longPromise（）（可能需要大约10秒才能执行操作），因此它在指示符出现之前等待10秒。

任何建议/模式将不胜感激。提前谢谢！

save(values, validate, props){

    const {
        dispatch,
        setOverlay
    } = props;

    return dispatch( setOverlay(true, 'Saving User...') )
        .then(() => {

             return longPromise();

        });

}

render(){

    const { handleSubmit } = this.props;

    return (
        <form onSubmit={ handleSubmit(this.save) }>
            <span>Form fields here</span>
        </form>
    )

}

Answer 1

您可以使用using system;道具。 It's a built-in of Redux Form

submitting

Answer 2

在redux repo中有一个很好的例子。基本上，您需要在thunk中调度多个操作，并使用指示请求当前状态的变量更新状态。因此，在您开始提取后，您将发送一个设置例如您所在州isFetching true并使用微调器渲染组件。当请求完成后，您的thunk将发送指示成功或失败的另一个操作并更新例如isFetching: false, error: false或isFetching: false, error: true取决于fetch请求的结果。

如果您的Promise需要10秒钟才能完成，那么您可能不会执行异步保存数据的代码。

redux-form保存指标和长期承诺

2 个答案: