Calvin-Huang

// Throttling
const inputEpic = (action$) =>
  action$.ofType('INPUT_CHANGED')
    .throttleTime(500)
    ...

Calvin-Huang

// Throttling
const inputEpic = (action$) =>
  action$.ofType('INPUT_CHANGED')
    .throttleTime(500)
    ...
    
// Deboucing
const inputEpic = (action$) =>
  action$.ofType('INPUT_CHANGED')
    .debounceTime(500)

Calvin-Huang

// Throttling
function* handleInput(input) {
  // ...
}

function* watchInput() {
  yield throttle(500, 'INPUT_CHANGED', handleInput)
}

// Debouncing

Calvin-Huang

// Use RxJS ajax
const fetchEpic = (action$) =>
  action$.ofType('FETCH_REQUESTED')
    .mergeMap(action => {
      
      // We want to cancel only the AJAX request, not stop the Epic from listening for any future actions.
      // https://github.com/redux-observable/redux-observable/blob/master/docs/recipes/Cancellation.md
      return Observable
        .ajax
        .get(action.payload.url)

Calvin-Huang

import axios, { CancelToken } from 'axios';
import { CANCEL } from 'redux-saga';

function* watchFetchData() {
  while (take('FETCH_REQUESTED')) {
    const fetchTask = yield fork(fetchData);
    yield take('CANCEL_FETCH');
    yield cancel(fetchTask);
  }
}

Calvin-Huang

import 'rxjs';
import { combineEpics } from 'redux-observable';

// Use RxJS ajax
const fetchEpic = (action$) =>
  action$.ofType('FETCH_REQUESTED')
    .mergeMap(action => Observable.ajax.get(action.payload.url))
    .map(data => ({ type: 'FETCH_SUCCEEDED', data }))
    .catch(error => Observable.of({ type: 'FETCH_FAILED', error }));

Calvin-Huang

import { takeEvery } from 'redux-saga';
import { call, put } from 'redux-saga/effects';

// Watcher
function* watchFetchData() {
  yield* takeEvery('FETCH_REQUESTED', fetchData);
}

// Worker
function* fetchData(action) {

Calvin-Huang

import { call, put } from 'redux-saga/effects'

export function* fetchData(action) {
   try {
      const data = yield call(Api.fetchUser, action.payload.url)
      yield put({type: "FETCH_SUCCEEDED", data})
   } catch (error) {
      yield put({type: "FETCH_FAILED", error})
   }
}

Calvin-Huang

const pingEpic = action$ =>
  action$.filter(action => action.type === 'PING')
    .mapTo({ type: 'PONG' });

// later...
dispatch({ type: 'PING' });

Calvin-Huang

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

// Note: this API requires redux@>=3.1.0
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);