Correct way to throttle HTTP calls based on state in redux and react

Question

What I need: A controlled component that is an input[type="search"]. After say, 1 second of no changes to that component I want to send out an HTTP call to execute that search and have the results shown in another component.

How I've done it: Whenever I call dispatch(setSearch(str)); I make a call to dispatch(displaySearch(false)); and then _.throttle a call to dispatch(displaySearch(true));

It feels to me that doing this sort of work in the component is incorrect, but I can't think of a way to do this in a reducer in redux.

Do you want someting global for all your application (like for all your API calls) or only for this component ? — martpie, Apr 13 '16 at 15:21
I could see it being used in other components within this section of the application. — Dave, Apr 13 '16 at 15:33
see http://stackoverflow.com/questions/23123138/perform-debounce-in-react-js/28046731#28046731 — Sebastien Lorber, Apr 29 '16 at 14:30

Florent · Answer 1 · 2016-04-29T20:58:17.483

You have different options to solve this.

1. Debounce your action at a component level

This is the simplest approach. When the input triggers a change, it calls a debounced version of setSearch delaying the server call.

import * as React from "react"
import {connect} from "react-redux"
import {setSearch} from "./actions"

export default connect(
  null,
  function mapDispatchToProps(dispatch) {
    const setSearch_ = _.debounce(q => dispatch(setSearch(q)), 1000)
    return () => ({setSearch: setSearch_})
  }
)(
  function SearchForm(props) {
    const {setSearch} = props
    return (
      <input type="search" onChange={setSearch} />
    )
  }
)

2. Debounce using redux-saga

This approach requires more boilerplate but gives you a lot more control over the workflow. Using a saga we intercept the SET_SEARCH action, debounce it, call the API then dispatch a new action containing the results.

import {call, cancel, fork, put, take} from "redux-saga/effects"
import {setSearchResults} from "./actions"
import {api} from "./services"
import {delay} from "./utils"

export default function* searchSaga() {
  yield [
    // Start a watcher to handle search workflow
    fork(watchSearch)
  ]
}

function* watchSearch() {
  let task

  // Start a worker listening for `SET_SEARCH` actions.
  while (true) {
    // Read the query from the action
    const {q} = yield take("SET_SEARCH")

    // If there is any pending search task then cancel it
    if (task) {
      yield cancel(task)
    }

    // Create a worker to proceed search
    task = yield fork(handleSearch, q)
  }
}

function* handleSearch(q) {
  // Debounce by 1s. This will lock the process for one second before
  // performing its logic. Since the process is blocked, it can be cancelled
  // by `watchSearch` if there are any other actions.
  yield call(delay, 1000)

  // This is basically `api.doSearch(q)`. The call should return a `Promise`
  // that will resolve the server response.
  const results = yield call(api.doSearch, q)

  // Dispatch an action to notify the UI
  yield put(setSearchResults(results))
}

Bad idea: creating the debounced function on `mapDispatchToProps` means that the debounced function will be recreated everytime the state changes, which means it won't actually be debounced. Also for redux-saga there's a doc on that: http://yelouafi.github.io/redux-saga/docs/recipes/index.html — Sebastien Lorber, Apr 29 '16 at 14:29
@SebastienLorber You were correct about `mapDispatchToProps`. I've updated my answer, it is no longer the case, thanks! And yes, my sample code was borrowed from the recipes of redux saga. — Florent, Apr 29 '16 at 21:00

score 3 · Answer 2 · answered Dec 20 '17 at 21:24

Associate delay and takeLatest:

import { all, takeLatest, call } from 'redux-saga/effects';
import { delay } from 'redux-saga';


function* onSearch(action) {
  yield call(delay, 1000); // blocks until a new action is
                           // triggered (takeLatest) or until
                           // the delay of 1s is over  

  const results = yield call(myFunction);
}

function* searchSagas() {
  yield all([
    // ...
    takeLatest(ON_SEARCH, onSearch),
  ]);
}

export default [searchSagas];

Correct way to throttle HTTP calls based on state in redux and react

2 Answers2