React/Reduxで一定期間イベントを持続

Question

私はReact/Reduxで作業しているアプリを持っています。値が変更されたときに、APIを介してエンティティをデータストアに自動保存することが含まれます。

エンティティが保存されている間にユーザーに「読み込み中」インジケータを提示し、「保存済み」と表示したいとします。または応答がAPIから戻ってエンティティの状態を更新すると、何か他のメッセージが表示されます。

私は実際にこれをうまく動作させています。私の減速は

case "UPDATE_ROUND_REQUEST": 
    newState = {...state}; 
    newState[action.meta.id].isSaving = true; 
    return newState; 

case "UPDATE_ROUND": 
    newState = {...state}; 
    newState[action.meta.id] = action.payload; // This response doesn't have the isSaving prop set 
    return newState; 

されており、唯一の問題は、50msのようなもので、その私のAPIが返すデータである私のコンポーネントの小道具は、このエンティティを受け取り、コンポーネントは、私が欲しい「保存」メッセージ

を表示するisSavingプロパティにアクセス。基本的に瞬時に、このメッセージは見られないほど瞬時に。 UXの観点から私が望むものは、エンティティがローディング中であることを小道具を介して検出したときに、データが保存されていることをユーザが確信できるように保存メッセージを妥当な時間表示する。

私はそれを何らかの無国籍の方法で処理するのに苦労しています。

ヒントありがとうございます！

Answer 1

私はこのことについて他の回答も聞いてみたいと思います。ここに私が働くと信じている一つの解決策があります。しかし、もっとパフォーマンスの高いソリューションがあるかもしれません。私の場合のように人為的にレデューサーからの応答を遅らせることは好ましくないかもしれません。

1. アクションの初期ディスパッチの中で、現在の時刻を日付オブジェクトとして保存します。
2. 応答が受信されると、要求が行われてからの経過時間を確認します。
3. 要求が行われてからxのミリ秒が経過した場合は、直ちに更新された状態を返します。
4. xミリ秒単位でない場合は、ローダーを最小限に抑える時間と、要求が行われてから経過した時間を差し引いた時間の差でタイムアウトを設定します。

以下のコードはテストされていませんが、概念的にはうまくいくと思います。

import moment from 'moment'; 

const round = (
    state = [], 
    action, 
) => { 
    switch (action.type) { 
    case "UPDATE_ROUND_REQUEST": 
     const newState = {...state}; 
     newState[action.meta.id].isSaving= true; 
     newState[action.meta.id].requestTime= moment(new Date()); 
     return newState; 
    case "UPDATE_ROUND": 
     // get difference between now and when the request was sent. 
     const difference = moment(new Date).diff(state[action.meta.id].requestTime); 
     const newState = {...state}; 
     // reset isSaving to false, and changes requestTime back null (default) 
     newState[action.meta.id] = {...action.payload, isSaving: false, requestTime: null}; 
     // if difference is greater than 3 seconds, return the new state immediately. 
     if (difference > 3000) { 
     // return new state with updated data for the value at newState[action.meta.id]. 
     return newState; 
     } 
     // else, if the difference is less than 3 seconds (3000ms), wait the difference and then return the new state 
     setTimeout(() => { 
     return newState; 
     }, 3000 - difference); 
    default: return state; 
    } 
};