Reactjs redux表单保存指示器和长期承诺

我试图在保存过程中显示UI覆盖。我正在使用thunk发送ui更改，但问题是它在重新呈现之前等待承诺解决。我的代码中有一个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>
    )

}

保存（值、验证、道具）{
常数{
派遣，
套印
}=道具；
返回分派（setOverlay（true，“正在保存用户…”）
.然后（（）=>{
返回长诺（）；
});
}
render（）{
const{handleSubmit}=this.props；
返回(
在这里形成字段
)
}

在中有一个很好的例子。基本上，您需要在thunk中分派多个操作，并使用一个指示请求当前状态的变量更新状态。因此，在开始抓取后，您将调度一个操作，将您状态中的

isFetching

设置为

true

，并使用微调器渲染组件。请求完成后，thunk将发送另一个操作，指示成功或失败，并进行更新，例如

isFetching:false、error:false

或

isFetching:false、error:true

，具体取决于

fetch

请求的结果

---

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

您可以使用

提交

道具

render（）{
const{handleSubmit，submiting}=this.props；
返回(
在这里形成字段
提交
)
}

感谢的可能重复，我理解异步抓取的想法，但这里的问题实际上是redux表单和保存的问题，而且保存必须返回一个承诺才能工作。我认为您关于完全异步执行代码的想法是唯一的出路。幕后有很多事情导致了10秒的延迟。@Lee M是的，您必须使代码异步，以允许您的存储更新isSaving指示符或任何您想调用的指示符，然后在异步代码返回时再次更新它。

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>
    )

}