redux-formインジケータと長い約束を保存する

Question

保存中にUIオーバーレイを表示しようとしています。私は、サンクを使用して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> 
    ) 

} 

Answer 1

redux repoにはかなり良い例があります。基本的には、サンクに複数のアクションをディスパッチし、リクエストの現在の状態を示す変数で状態を更新する必要があります。したがって、フェッチを開始した後に、たとえば次のような設定を行うアクションをディスパッチします。 isFetchingをtrueに設定し、コンポーネントをスピナーでレンダリングします。リクエストが完了すると、サンクは、成功または失敗を示す別のアクションをディスパッチし、更新します。 fetchリクエストの結果に応じてisFetching: false, error: falseまたはisFetching: false, error: trueになります。

プロミスが完了するまでに10秒かかる場合は、おそらくデータを非同期に保存するコードを実行しないでしょう。

Answer 2

これには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> 
    ) 

}