Async in Redux

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