redux-form Saving Indicator 和 long promise

Question

我正在尝试在保存过程中显示 UI 叠加层。我正在使用 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

您可以为此使用 submitting 道具。 It's a built-in of Redux Form.

render () {

    const { handleSubmit, submitting } = this.props;

    return (
        <form onSubmit={ handleSubmit(this.save) }>
            <span>Form fields here</span>
            <button type="submit" disabled={ submitting }>Submit</button>
        </form>
    )

}

Answer 2

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

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