Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Async in Redux
Darpan Kakadia
October 25, 2017
Technology
0
93
Async in Redux
Slides from my talk at ReactiveConf 2017 on how to handle Async in Redux.
Darpan Kakadia
October 25, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
2022 COSCUP - GKE Backend Cluster 除雷分享
brentchang
0
120
Red Hat Enterprise Linux 9のリリースノートを読む前に知りたい最近のキーワードをまとめて復習
moriwaka
0
360
ソフトバンクaPaaS領域への挑戦
sbtechnight
0
310
Micro frontends and micro services
kashif98
0
130
金融スタートアップの上場準備で大事にしたマインドセット / 2022-08-04-the-mindset-in-preparing-for-ipo
stajima
0
310
第22回 MLOps 勉強会:みてねのMLOps事情
tonouchi510
1
790
AWS CLI でやってみる ~ AWS Hands-on for Beginners ECS ハンズオン ~
kentosuzuki
1
440
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
sakon310
4
450
cobra は便利になっている
nwiizo
0
140
DeepDive into Modern Development with AWS
mokocm
1
340
〇〇みたいな検索作ってと言われたときに考えること / thinking before developing search system like that one
ryook
5
2.7k
経験者が話す!クラウド接続の3つの注意点と最新情報
sbtechnight
0
310
Featured
See All Featured
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
173
8.6k
The World Runs on Bad Software
bkeepers
PRO
57
5.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
269
12k
Web Components: a chance to create the future
zenorocha
303
40k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
212
20k
The Illustrated Children's Guide to Kubernetes
chrisshort
18
40k
The Web Native Designer (August 2011)
paulrobertlloyd
75
2k
How to train your dragon (web standard)
notwaldorf
60
3.9k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
Rails Girls Zürich Keynote
gr2m
87
12k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Done Done
chrislema
174
14k
Transcript
Async in Redux
Darpan Kakadia UI Engineer @Cleartrip @kakadiadarpan
Promises, Thunks or Sagas?
You need just one!
You need just one!
Redux saga is a library which helps you manage async
actions using ES6 generator functions. Redux Saga
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) }
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) }
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) }
Let’s see how Thunks compares with Saga?
function fetchData() { return dispatch => { axios .get("/data") .then(data
=> {dispatch({ type: "FETCH_SUCCESS", data });}) .catch(error => dispatch({ type: "FETCH_FAILED", error })); }; } Redux Thunk
function fetchData() { return dispatch => { axios .get("/data") .then(data
=> {dispatch({ type: "FETCH_SUCCESS", data });}) .catch(error => dispatch({ type: "FETCH_FAILED", error })); }; } Redux Thunk
function fetchData() { return dispatch => { axios .get("/data") .then(data
=> {dispatch({ type: "FETCH_SUCCESS", data });}) .catch(error => dispatch({ type: "FETCH_FAILED", error })); }; } Redux Thunk
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
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
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
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
Isn’t that just too much work?
Advantages of redux-saga
• Task cancellation Advantages of redux-saga
• Task cancellation • Race conditions Advantages of redux-saga
• Task cancellation • Race conditions • Throttling Advantages of
redux-saga
• Task cancellation • Race conditions • Throttling • Debouncing
Advantages of redux-saga
• Task cancellation • Race conditions • Throttling • Debouncing
• Retrying network calls Advantages of redux-saga
• Task cancellation • Race conditions • Throttling • Debouncing
• Retrying network calls • Undo actions Advantages of redux-saga
@kakadiadarpan