42
The Saga Begins Daniel Franz

The redux saga begins

Embed Size (px)

Citation preview

Page 1: The redux saga begins

The Saga BeginsDaniel Franz

Page 2: The redux saga begins

A long, long time ago...

● We were using redux-thunk

● We were chaining actions in actions

● We were providing callbacks to actions

● We were afraid of writing tests

Page 3: The redux saga begins

redux-thunkfunction someAction() { return (dispatch) => { dispatch(someActionPending()); someAsyncFunction() .then((result) => { dispatch(someActionSuccess(result)); dispatch(followUpAction()); }) .error((error) => dispatch(someActionError(error)); }}

Page 4: The redux saga begins

redux-thunkfunction someAction() { return (dispatch) => { dispatch(someActionPending()); someAsyncFunction() .then((result) => { dispatch(someActionSuccess(result)); dispatch(followUpAction()); }) .error((error) => dispatch(someActionError(error)); }}

Page 5: The redux saga begins

redux-thunkfunction someAction() { return (dispatch) => { dispatch(someActionPending()); someAsyncFunction() .then((result) => { dispatch(someActionSuccess(result)); dispatch(followUpAction()); }) .error((error) => dispatch(someActionError(error)); }}

Page 6: The redux saga begins

redux-thunkfunction someAction() { return (dispatch) => { dispatch(someActionPending()); someAsyncFunction() .then((result) => { dispatch(someActionSuccess(result)); dispatch(followUpAction()); }) .error((error) => dispatch(someActionError(error)); }}

Page 7: The redux saga begins

redux-thunkfunction someAction() { return (dispatch) => { dispatch(someActionPending()); someAsyncFunction() .then((result) => { dispatch(someActionSuccess(result)); dispatch(followUpAction()); }) .error((error) => dispatch(someActionError(error)); }}

Page 8: The redux saga begins

redux-thunkfunction someAction() { return (dispatch) => { dispatch(someActionPending()); someAsyncFunction() .then((result) => { dispatch(someActionSuccess(result)); dispatch(followUpAction()); }) .error((error) => dispatch(someActionError(error)); }}

Page 9: The redux saga begins

redux-thunkfunction someAction(followUpAction) { return (dispatch) => { dispatch(someActionPending()); asyncFunction() .then((result) => { dispatch(someActionSuccess(result)); dispatch(followUpAction(result)); }) .error((error) => dispatch(someActionError(error)); }}

CALLBACK HELL

Page 10: The redux saga begins

Advantages of Redux-Saga

Pure actions

Power of middleware with concise syntax

Readable and testable workflows

Side effects encapsulated in saga

Return from callback hell

Page 11: The redux saga begins

Refactored to Redux-Sagafunction* someSaga() { yield put(someActionPending()); try { const result = yield call(someAsyncFunction); yield put(someActionSuccess(result)); yield* followUpSaga(); } catch (error) { yield put(someActionError(error)); }}

function* watchSomeSaga() { yield takeEvery(TYPES.SOME_ACTION, someSaga);}

Page 12: The redux saga begins

Refactored to Redux-Sagafunction* someSaga() { yield put(someActionPending()); try { const result = yield call(someAsyncFunction); yield put(someActionSuccess(result)); yield* followUpSaga(); } catch (error) { yield put(someActionError(error)); }}

function* watchSomeSaga() { yield takeEvery(TYPES.SOME_ACTION, someSaga);}

Page 13: The redux saga begins

ES6-Generatorsfunction* generator (i) {

yield i; i = i + 5;

yield i;}

let g = generator(3);g.next(); // {value: 3, done: false}g.next(); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Leonard Koch
Ich glaube ich würde hier nicht next(5) callen sondern einfach mehrfach next. Das ist glaube ich eingängiger.
Leonard Koch
Vielleicht ist es mit ausreichender Erklärung okay. Not sure.
Daniel Franz
Was hälst du von diesem Beispiel? Auf der folgenden Seite ist dann ein Bi-direktionales Beispiel. Den eingefärbten Flow würde ich dann später machen
Leonard Koch
Das sieht super aus.
Page 14: The redux saga begins

ES6-Generatorsfunction* generator (i) {

yield i; i = i + 5;

yield i;}

let g = generator(3);g.next(); // {value: 3, done: false}g.next(); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 15: The redux saga begins

ES6-Generatorsfunction* generator (i) {

yield i; i = i + 5;

yield i;}

let g = generator(3);g.next(); // {value: 3, done: false}g.next(); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 16: The redux saga begins

ES6-Generatorsfunction* generator (i) {

yield i; i = i + 5;

yield i;}

let g = generator(3);g.next(); // {value: 3, done: false}g.next(); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 17: The redux saga begins

ES6-Generatorsfunction* generator (i) {

yield i; i = i + 5;

yield i;}

let g = generator(3);g.next(); // {value: 3, done: false}g.next(); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 18: The redux saga begins

ES6-Generatorsfunction* generator (i) {

yield i; i = i + 5;

yield i;}

let g = generator(3);g.next(); // {value: 3, done: false}g.next(); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 19: The redux saga begins

ES6-Generatorsfunction* generator (i) {

yield i; i = i + 5;

yield i;}

let g = generator(3);g.next(); // {value: 3, done: false}g.next(); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 20: The redux saga begins

ES6-Generatorsfunction* generator (i) {

yield i; i = i + 5;

yield i;}

let g = generator(3);g.next(); // {value: 3, done: false}g.next(); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 21: The redux saga begins

ES6-Generatorsfunction* generator (i) {

yield i; i = i + 5;

yield i;}

let g = generator(3);g.next(); // {value: 3, done: false}g.next(); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 22: The redux saga begins

ES6-Generatorsfunction* generator (i) {

yield i; i = i + 5;

yield i;}

let g = generator(3);g.next(); // {value: 3, done: false}g.next(); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 23: The redux saga begins

ES6-Generatorsfunction* generator (i) {

yield i; i = i + 5;

yield i;}

let g = generator(3);g.next(); // {value: 3, done: false}g.next(); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 24: The redux saga begins

ES6-Generatorsfunction* generator (i) {

yield i; i = i + 5;

yield i;}

let g = generator(3);g.next(); // {value: 3, done: false}g.next(); // {value: 8, done: false}g.next(); // {value: undefined, done: true}

Page 25: The redux saga begins

Bi-directional ES6-Generatorsfunction* generator () {

let i = yield; i = i + 5;

yield i;}

let g = generator();g.next(); // {value: undefined, done: false}g.next(3); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Leonard Koch
Auch ein gutes Beispiel. Würde hier dann in Worten ganz klar machen, dass wenn man an der zweiten Stelle dort ein Argument reingibt es dann den vorherigen yield wert ersetzt.Das ist relativ unintuitiv.
Daniel Franz
Ja, es ist im ersten Augenblick nicht intuitiv. Wenn man den Flow durchgeht, wird beim yield unterbrochen. Die Zuweisung zu i passiert ja erst danach. Glaube das wird durch die Färbung relativ klar.
Daniel Franz
Natürlich ist alles erklärungsbedürftig und ich werde auch viele Worte dazu sagen :)
Leonard Koch
Cool. Ja klar. Das sieht ziemlich gut aus. Hast du den Durchlauf gemacht?
Daniel Franz
Ja, habe 13 Minuten für die Slides gebraucht. Wird sich sicherlich noch verändern, wenn ich alles sage, was ich sagen möchte, und sicherer/schneller werde ;)
Leonard Koch
top
Leonard Koch
dann hast du ja noch gut Raum fürs live coding und brauchst dir nicht groß Sorgen um die Zeit machen.
Page 26: The redux saga begins

Bi-directional ES6-Generatorsfunction* generator () {

let i = yield; i = i + 5;

yield i;}

let g = generator();g.next(); // {value: undefined, done: false}g.next(3); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 27: The redux saga begins

Bi-directional ES6-Generatorsfunction* generator () {

let i = yield; i = i + 5;

yield i;}

let g = generator();g.next(); // {value: undefined, done: false}g.next(3); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 28: The redux saga begins

Bi-directional ES6-Generatorsfunction* generator () {

let i = yield; i = i + 5;

yield i;}

let g = generator();g.next(); // {value: undefined, done: false}g.next(3); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 29: The redux saga begins

Bi-directional ES6-Generatorsfunction* generator () {

let i = yield; i = i + 5;

yield i;}

let g = generator();g.next(); // {value: undefined, done: false}g.next(3); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 30: The redux saga begins

Bi-directional ES6-Generatorsfunction* generator () {

let i = yield; i = i + 5;

yield i;}

let g = generator();g.next(); // {value: undefined, done: false}g.next(3); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 31: The redux saga begins

Bi-directional ES6-Generatorsfunction* generator () {

let i = yield; i = i + 5;

yield i;}

let g = generator();g.next(); // {value: undefined, done: false}g.next(3); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 32: The redux saga begins

Bi-directional ES6-Generatorsfunction* generator () {

let i = yield; i = i + 5;

yield i;}

let g = generator();g.next(); // {value: undefined, done: false}g.next(3); // {value: 8, done: false}g.next(); // {value: undefined: done, true}

Page 33: The redux saga begins

Combining Generatorsfunction* anotherGenerator(i) { yield i + 1; yield i + 2;}

function* generator(i) { yield i; yield* anotherGenerator(i); yield i + 10;}

let g = generator(10);

g.next().value; // 10g.next().value; // 11g.next().value; // 12g.next().value; // 20

Page 34: The redux saga begins

Back to Redux-Sagafunction* someSaga() { yield put(someActionPending()); try { const result = yield call(asyncFunction); yield put(someActionSuccess(result)); yield* followUpSaga(); } catch (error) { yield put(someActionError(error)); }}

function* watchSomeSaga() { yield takeEvery(TYPES.TRIGGER_ACTION, someSaga);}

Page 35: The redux saga begins

Saga Effectsfunction* someSaga() { yield put(someActionPending()); try { const result = yield call(asyncFunction); yield put(someActionSuccess(result)); yield* followUpSaga(); } catch (error) { yield put(someActionError(error)); }}

function* watchSomeSaga() { yield takeEvery(TYPES.TRIGGER_ACTION, someSaga);}

Examples of effects:

● put dispatches an action

● take waits for an action

● call calls an (async) function

● select gets (partial) state

Daniel Franz
was hälst du von den erklärungen?
Felix Mau
sind okay, vllt nocheinml takeLatest / takeEvery erklären?
Felix Mau
Ah nächste Folie okay 🙈
Page 36: The redux saga begins

Saga Combined Effectsfunction* someSaga() { yield put(someActionPending()); try { const result = yield call(asyncFunction); yield put(someActionSuccess(result)); yield* followUpSaga(); } catch (error) { yield put(someActionError(error)); }}

function* watchSomeSaga() { yield takeEvery(TYPES.TRIGGER_ACTION, someSaga);}

Examples of combined effects:

● takeEvery waits for an action,

executes a generator and

waits for the next action

● takeLatest works like

takeEvery, but cancels the

execution of the generator

when another action arrives

Page 37: The redux saga begins

Debouncing sagafunction* debounceSaga(action) { yield call(delay, 300); yield put(keyDownAction(action.value));}

function* watchDebounceActionSaga() { yield takeLatest(TYPES.DEBOUNCE_KEY_DOWN_ACTION, debounceSaga);}

Daniel Franz
Wie ist das Beispiel?
Felix Mau
Gutes Beispiel für takeLatest!
Page 38: The redux saga begins

Pollingfunction* workerSaga() { const something = yield call(someService, fetchSomething); yield put(someAction(something));}

function* pollingSaga() { while (true) { yield* workerSaga(); yield call(delay, 5000); }}

Daniel Franz
Wie ist das Beispiel?
Page 39: The redux saga begins

Testing Live Demo

Leonard Koch
Anhängig davon wie die live demo ist, könnte man hier auch noch mit slides etwas klar machen wie das mit dem testing funktioniert. In ähnlicher Form wie du es für generators gemacht hast. Manchmal haben Leute Schwierigkeiten das im live coding zu begreifen.Wenn du es langsam genug machst und genug erklärst, sollte es aber okay sein.
Daniel Franz
Habe jetzt die 3 Folien davor hier eingefügt. Wie bereits gefragt: Was hälst du davon? ;)
Page 40: The redux saga begins

Concusion

Side effects encapsulated in saga

Power of middleware with concise syntax

Readable and easily testable workflows

Pure actions

Page 41: The redux saga begins

Thank you

Page 42: The redux saga begins

Questions?


Asyc flow control with javascript generators - redux-saga

Asyc flow control with javascript generators - redux-saga

Technology
Remediation Redux

Remediation Redux

Documents
Change Redux

Change Redux

Business
(Un)popular Opinions - React Finland uninstall redux-saga redux-loop redux-thunk redux-effects react-intl-redux react-redux redux-form. What now? MobX. What are people really excited

(Un)popular Opinions - React Finland uninstall redux-saga redux-loop redux-thunk redux-effects react-intl-redux react-redux redux-form. What now? MobX. What are people really excited

Documents
ตุลาการรัฐประหาร redux

ตุลาการรัฐประหาร redux

Documents
Open Source Software Business Models Redux · 2017. 12. 14. · IAS in late 1940s IBM “SHARE” Conf& Library Begins 1953 DECUS Conf& Library Begins 1962 MIT Project Athena Begins

Open Source Software Business Models Redux · 2017. 12. 14. · IAS in late 1940s IBM “SHARE” Conf& Library Begins 1953 DECUS Conf& Library Begins 1962 MIT Project Athena Begins

Documents
Interaction15 Redux

Interaction15 Redux

Design
The Lundholm Saga Måns Jönsson - Glocalnetgoto.glocalnet.net/oljelund/familyhistory/lundholm.pdf1 The Lundholm Saga Måns Jönsson The Lundholm story begins in Bonderup, a parish

The Lundholm Saga Måns Jönsson - Glocalnetgoto.glocalnet.net/oljelund/familyhistory/lundholm.pdf1 The Lundholm Saga Måns Jönsson The Lundholm story begins in Bonderup, a parish

Documents
Redux Selector (GB) - Gazechim ES Adhesivos Hexcel.pdf · Redux ® Film Adhesives Redux ® Film Adhesives Redux ® 609 Redux ® 610 Redux ® 335 Redux ® 312 Redux ® 330 Redux ®

Redux Selector (GB) - Gazechim ES Adhesivos Hexcel.pdf · Redux ® Film Adhesives Redux ® Film Adhesives Redux ® 609 Redux ® 610 Redux ® 335 Redux ® 312 Redux ® 330 Redux ®

Documents
Real world Redux - web.jakoblind.noweb.jakoblind.no/real-world-redux-toc.pdf · Real world Redux Jakob Lind Contents Introduction 5 Chapter 1 - The Redux basics 6 You know React,

Real world Redux - web.jakoblind.noweb.jakoblind.no/real-world-redux-toc.pdf · Real world Redux Jakob Lind Contents Introduction 5 Chapter 1 - The Redux basics 6 You know React,

Documents
SXSW Redux

SXSW Redux

Design
SAGA-720I SAGA-720II SAGA-720IIP SAGA-1350I SAGA-1350II SAGA-1350IIP ... · PDF fileSAGA-1350I SAGA-1350II SAGA-1350IIP SAGA-1750I SAGA-1750II SAGA-1750IIP . Hefei Saga ... 2 Congratulations

SAGA-720I SAGA-720II SAGA-720IIP SAGA-1350I SAGA-1350II SAGA-1350IIP ... · PDF fileSAGA-1350I SAGA-1350II SAGA-1350IIP SAGA-1750I SAGA-1750II SAGA-1750IIP . Hefei Saga ... 2 Congratulations

Documents
Mises Redux' -- Redux: Fifteen Arguments against Finite ...joelvelasco.net/teaching/3865/hajek - mises redux redux.pdf · MISES REDUX" - REDUX: FIFTEEN ARGUMENTS AGAINST FINITE FREQUENTISM

Mises Redux' -- Redux: Fifteen Arguments against Finite ...joelvelasco.net/teaching/3865/hajek - mises redux redux.pdf · MISES REDUX" - REDUX: FIFTEEN ARGUMENTS AGAINST FINITE FREQUENTISM

Documents
Redux saga: managing your side effects. Also: generators in es6

Redux saga: managing your side effects. Also: generators in es6

Internet
React Redux

React Redux

Technology
CV Blessig LionelVue.js React VueJS, VueX, Vue-Router, Gridsome 12 ans React, Redux, Redux Saga, React Native, Gatsby | 1 an EXPERIENCE 2018 - 2019 BIG BOSS STUDIO 2017 - 2018 PIX

CV Blessig LionelVue.js React VueJS, VueX, Vue-Router, Gridsome 12 ans React, Redux, Redux Saga, React Native, Gatsby | 1 an EXPERIENCE 2018 - 2019 BIG BOSS STUDIO 2017 - 2018 PIX

Documents
Kitchen Redux

Kitchen Redux

Documents
Smart City Planning with ArcGIS Urban and CityEngine...GraphQL esri-rest-js Apollo Software architecture = ArcGIS Urban ArcGIS Online React Redux Redux-Saga CityEngine PRT JS API WASM

Smart City Planning with ArcGIS Urban and CityEngine...GraphQL esri-rest-js Apollo Software architecture = ArcGIS Urban ArcGIS Online React Redux Redux-Saga CityEngine PRT JS API WASM

Documents
Putin redux

Putin redux

Documents
CS 1110 Spring 2020, Assignment 4: Tre1110 redux · CS 1110 Spring 2020, Assignment 4: Tre1110 redux Updates: The assignment itself, with updates marked inorange, begins on the next

CS 1110 Spring 2020, Assignment 4: Tre1110 redux · CS 1110 Spring 2020, Assignment 4: Tre1110 redux Updates: The assignment itself, with updates marked inorange, begins on the next

Documents
The foresight saga, redux - SRI Internationalneumann/cacm228.pdf · suitable choices of languages for re-quirements, specifications, program-ming, and so on—compatible with the

The foresight saga, redux - SRI Internationalneumann/cacm228.pdf · suitable choices of languages for re-quirements, specifications, program-ming, and so on—compatible with the

Documents
The foresight saga, redux - SRI International · worthy behavior is essential—with respect to satisfying requirements for security, reliability, resilience, human safety, human

The foresight saga, redux - SRI International · worthy behavior is essential—with respect to satisfying requirements for security, reliability, resilience, human safety, human

Documents
As the Twilight Saga Begins, 17-Yearold Isabella

As the Twilight Saga Begins, 17-Yearold Isabella

Documents
What is “Church?” Redux€¦ · Redux Sermon by Rev. Ken Jones, delivered October 14, 2018 This work is shared under a Creative Commons agreementi “The story begins in a familiar

What is “Church?” Redux€¦ · Redux Sermon by Rev. Ken Jones, delivered October 14, 2018 This work is shared under a Creative Commons agreementi “The story begins in a familiar

Documents
1930s Redux

1930s Redux

Documents
React + FLUX + Redux + Redux Saga のお話

React + FLUX + Redux + Redux Saga のお話

Technology
The Complete Redux Book - Leanpubsamples.leanpub.com/redux-book-sample.pdfThis is possible because when the store is created, Redux dispatches a special action called @@redux/INIT

The Complete Redux Book - Leanpubsamples.leanpub.com/redux-book-sample.pdfThis is possible because when the store is created, Redux dispatches a special action called @@redux/INIT

Documents
The GE-MOV Saga - DSLReports Home · The saga then begins with an ... by the covers of successive editions (avatars) of the Transient Voltage Suppression Manual, GE ... - - crnea

The GE-MOV Saga - DSLReports Home · The saga then begins with an ... by the covers of successive editions (avatars) of the Transient Voltage Suppression Manual, GE ... - - crnea

Documents
React Redux Redux-Saga + サーバサイドレンダリング

React Redux Redux-Saga + サーバサイドレンダリング

Technology
IxD13 Redux

IxD13 Redux

Documents