reduxのDebounce APIコール

Question

Googleに分析データを送信しようとしており、APIを作成する必要があります。私は、顧客のリストをフィルタリングする検索ボックスを持っています。検索自体は300msごとにデバウンスされますが、検索データを1000msごとにGAに送信したいだけです。

私はredux-debouncedミドルウェアを使用しようとしています。しかし、それは状態の更新を遅らせるのに役立つだけであることに気づいた。私はredux-thunkでそれを使用しようとしています。 I saw an issue where someone already asked。私はすでにそこに書かれたものを試して、それは動作しませんでした。

これは私のサンクと中央の品物が

let store = createStore(
    reducers, 
    applyMiddleware(logger, createDebounce(), thunkMiddleware) 
); 

export function trackCustomerSearch(key) { 
    const thunk = dispatch => { 
    console.log(key); //This should be only logged only once for 1000ms 
    ... //make api call to GA 
    }; 

    thunk.meta = { 
    debounce: { 
     time: 1000 
    } 
    }; 

    return thunk; 
} 

どのように見えるか私は何かが足りないのですか？それとも代替アプローチがありますか？

Answer 1

独自のミドルウェアを書く時間。それほど難しいことではなく、あなたが望むものとまったく同じようにすることができます。

const debounceInterval = 1000; 
let timerRef = null; 

const updateGAMiddleware = store => next => action => { 
    if (action.type === 'USER_UPDATED_SEARCH_FIELD') { 
    // if my timeout hasn't passed, exit early 
    if (timerRef) return next(action); 

    // send update to GA here 
    // (presumably search field value is in action.data) 

    timerRef = setTimeout(() => { timerRef = null; }, debounceInterval); 
    } 
    return next(action); 
}; 

export default updateGAMiddleware; 

次に、あなただけのインポートと同じよう-ので、このミドルウェアを含める：

... 
import updateGAMiddleware from './<somewhere_sane>'; 
let store = createStore(
    reducers, 
    applyMiddleware(logger, updateGAMiddleware, thunkMiddleware) 
); 

そして、彼らはせいぜいGAに送信されますので、あなたは同じくらいあなたが望むようUSER_UPDATED_SEARCH_FIELDアクションをディスパッチすることができます一秒ごと。

まだ他のデバウンスされたミドルウェアが必要かどうかわかりません。状態ツリーを更新する頻度についてではなく、GAに投稿する頻度だけを気にしていれば、おそらくそうではありません。

うまくいけば、それはあなたが進めていたことでした。そうでない場合は、明確にしてください。私が助けることをします。それ以外の場合は、幸運！