LoginSignup
9
10

More than 5 years have passed since last update.

Reduxで大量に発生するactionを間引く

Posted at

scrollイベントに関連するactionなど、大量に発生するactionを間引く、Redux middlewareを作りました。

インストール

$ npm install --save redux-throttle-actions

使い方

第1引数は間引きたいAction Typeを配列もしくは文字列で指定します。文字列の場合は、
内部で配列にして処理します。
第2引数は間引きたい秒数をmillisecondsで指定します。

import {createStore, applyMiddleware} from "redux";
import throttleActions from "redux-throttle-actions";
// combineReducersされたreducer達
import reducers from "./reducers";
import {someType} from "./constants/actionTypes";

// someTypeが実行頻度が100msに一度になるように間引く
const throttleSomeType = throttleActions(someType, 100);
const store = applyMiddleware(throttleSomeType)(createStore)(reducers);

// In view
store.dispatch({ type: someType, ... }); // dispatchされる
store.dispatch({ type: someType, ... }); // 間引かれて、dispatchされない
store.dispatch({ type: someType, ... }); // 間引かれて、dispatchされない

// 一度目のdispatchから100ms経過

store.dispatch({ type: someType, ... }); // dispatchされる

内部でlodashのthrottle関数を使っており、
第3引数はthrottle関数の第3引数に渡される。(options.leadingとoptions.trailing)

// そのまま内部で使っている_.throttleの第3引数に渡される
const options = { leading: true, trailing: true };
const throttleSomeType = throttleActions(someType, 100, options);

バグや要望とはGithubのIssueでお願いしますー

9
10
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
10