Debouncing and Throttling

Debouncing delays the execution of your code until the user stops performing a certain action for a specified amount of time.

Throttling limits the execution of your code to once in every specified time interval. (source)

Promise Saga provides effects to handle this behavior. For example:

const saga = createSaga(async function() {
    this.debounce(500, Todos.actions.toggleTodo, toggleTodo);
    this.throttle(500, Todos.actions.addTodo, addTodo);
});

const toggleTodo = createSaga(async function() {
    //
});

const addTodo = createSaga(async function() {
    //
});

Here, debounce and throttle are designed to act non-blocking. See error handling in non-blocking calls for more information on how to handle errors.

Since higher effects are built on lower ones, there are other ways to reimplement debounce and throttle with other effects. For example, you can use takeLatest with delay:

const saga = createSaga(async function() {
    this.takeLatest(Todos.actions.toggleTodo, toggleTodo);
});

const toggleTodo = createSaga(async function() {
    await this.delay(500);
    // saga logic
});