Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Async in Redux

Async in Redux

Slides from my talk at ReactiveConf 2017 on how to handle Async in Redux.

18569c6aed2f3af6040a37f83f0bc028?s=128

Darpan Kakadia

October 25, 2017
Tweet

Transcript

  1. Async in Redux

  2. Darpan Kakadia UI Engineer @Cleartrip @kakadiadarpan

  3. Promises, Thunks or Sagas?

  4. You need just one!

  5. You need just one!

  6. Redux saga is a library which helps you manage async

    actions using ES6 generator functions. Redux Saga
  7. import { delay } from 'redux-saga' import { put, takeEvery

    } from 'redux-saga/effects' // Our worker Saga: will perform the async increment task export function* incrementAsync() { yield delay(1000) yield put({ type: 'INCREMENT' }) } // Our watcher Saga: spawn a new incrementAsync task on each INCREMENT_ASYNC export function* watchIncrementAsync() { yield takeEvery('INCREMENT_ASYNC', incrementAsync) }
  8. import { delay } from 'redux-saga' import { put, takeEvery

    } from 'redux-saga/effects' // Our worker Saga: will perform the async increment task export function* incrementAsync() { yield delay(1000) yield put({ type: 'INCREMENT' }) } // Our watcher Saga: spawn a new incrementAsync task on each INCREMENT_ASYNC export function* watchIncrementAsync() { yield takeEvery('INCREMENT_ASYNC', incrementAsync) }
  9. import { delay } from 'redux-saga' import { put, takeEvery

    } from 'redux-saga/effects' // Our worker Saga: will perform the async increment task export function* incrementAsync() { yield delay(1000) yield put({ type: 'INCREMENT' }) } // Our watcher Saga: spawn a new incrementAsync task on each INCREMENT_ASYNC export function* watchIncrementAsync() { yield takeEvery('INCREMENT_ASYNC', incrementAsync) }
  10. Let’s see how Thunks compares with Saga?

  11. function fetchData() { return dispatch => { axios .get("/data") .then(data

    => {dispatch({ type: "FETCH_SUCCESS", data });}) .catch(error => dispatch({ type: "FETCH_FAILED", error })); }; } Redux Thunk
  12. function fetchData() { return dispatch => { axios .get("/data") .then(data

    => {dispatch({ type: "FETCH_SUCCESS", data });}) .catch(error => dispatch({ type: "FETCH_FAILED", error })); }; } Redux Thunk
  13. function fetchData() { return dispatch => { axios .get("/data") .then(data

    => {dispatch({ type: "FETCH_SUCCESS", data });}) .catch(error => dispatch({ type: "FETCH_FAILED", error })); }; } Redux Thunk
  14. function* fetchData() { try { const data = yield call(axios.get,

    "/data"); yield put({ type: "FETCH_SUCCESS", data }); } catch (error) { yield put({ type: "FETCH_FAILED", error }); } } function* rootSaga() { yield* takeLatest("FETCH_DATA", fetchData); } Redux Saga
  15. function* fetchData() { try { const data = yield call(axios.get,

    "/data"); yield put({ type: "FETCH_SUCCESS", data }); } catch (error) { yield put({ type: "FETCH_FAILED", error }); } } function* rootSaga() { yield* takeLatest("FETCH_DATA", fetchData); } Redux Saga
  16. function* fetchData() { try { const data = yield call(axios.get,

    "/data"); yield put({ type: "FETCH_SUCCESS", data }); } catch (error) { yield put({ type: "FETCH_FAILED", error }); } } function* rootSaga() { yield* takeLatest("FETCH_DATA", fetchData); } Redux Saga
  17. function* fetchData() { try { const data = yield call(axios.get,

    "/data"); yield put({ type: "FETCH_SUCCESS", data }); } catch (error) { yield put({ type: "FETCH_FAILED", error }); } } function* rootSaga() { yield* takeLatest("FETCH_DATA", fetchData); } Redux Saga
  18. Isn’t that just too much work?

  19. Advantages of redux-saga

  20. • Task cancellation Advantages of redux-saga

  21. • Task cancellation • Race conditions Advantages of redux-saga

  22. • Task cancellation • Race conditions • Throttling Advantages of

    redux-saga
  23. • Task cancellation • Race conditions • Throttling • Debouncing

    Advantages of redux-saga
  24. • Task cancellation • Race conditions • Throttling • Debouncing

    • Retrying network calls Advantages of redux-saga
  25. • Task cancellation • Race conditions • Throttling • Debouncing

    • Retrying network calls • Undo actions Advantages of redux-saga
  26. @kakadiadarpan