Async in Redux

Slides from my talk at ReactiveConf 2017 on how to handle 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