![function makeSandwichesForEverybody() {
return function (dispatch, getState) {
if (!getState().sandwiches.isShopOpen) {
// You don’t have to return Promises, but it’s a handy convention
// so the caller can always call .then() on async dispatch result.
return Promise.resolve();
}
// We can dispatch both plain object actions and other thunks,
// which lets us compose the asynchronous actions in a single flow.
return dispatch(
makeASandwichWithSecretSauce('My Grandma')
).then(() =>
Promise.all([
dispatch(makeASandwichWithSecretSauce('Me')),
dispatch(makeASandwichWithSecretSauce('My wife'))
])
).then(() =>
dispatch(makeASandwichWithSecretSauce('Our kids'))
).then(() =>
dispatch(getState().myMoney > 42 ?
withdrawMoney(42) :
apologize('Me', 'The Sandwich Shop')
)
);
};
}](https://image.slidesharecdn.com/presentation-180830140658/85/Better-react-redux-apps-using-redux-saga-10-320.jpg)
Better react/redux apps using redux-saga
- 1. Better react/redux apps using redux-saga By @younes Front end Developer @
- 2. what about you ? React Or … Redux Or … Thunk Or … Saga Or …
- 4. Redux !
- 9. Seriously !
- 10. function makeSandwichesForEverybody() { return function (dispatch, getState) { if (!getState().sandwiches.isShopOpen) { // You don’t have to return Promises, but it’s a handy convention // so the caller can always call .then() on async dispatch result. return Promise.resolve(); } // We can dispatch both plain object actions and other thunks, // which lets us compose the asynchronous actions in a single flow. return dispatch( makeASandwichWithSecretSauce('My Grandma') ).then(() => Promise.all([ dispatch(makeASandwichWithSecretSauce('Me')), dispatch(makeASandwichWithSecretSauce('My wife')) ]) ).then(() => dispatch(makeASandwichWithSecretSauce('Our kids')) ).then(() => dispatch(getState().myMoney > 42 ? withdrawMoney(42) : apologize('Me', 'The Sandwich Shop') ) ); }; }
- 11. export default function* onboarding() { yield take(GO_TO_NEXT_STAGE); // stage: initial-confirmed yield delay(1000); yield put(goToNextStage()); // stage: keys-introduced yield handleKeyExperiments(); yield put(goToNextStage()); yield delay(2000); yield put(goToNextStage()); // stage: pad-introduced yield handlePadExperiments(); yield put(goToNextStage()); yield delay(2000); yield put(goToNextStage()); // stage: control-panel-introduced yield delay(5000); yield put(goToNextStage()); yield delay(2000); // Persist a flag in localStorage, so that this user does not // have to go through the onboarding flow again. localStorage.setItem(ONBOARDING_COMPLETED_FLAG, true); yield put(completeOnboarding()); }
- 12. Generators !
- 13. function* generator() { yield 1; console.log("hello"); const val = test(yield { name: "younes" }) // setting variable value from outside console.log(val); // 5 } const iterator = generator(); // Iterator (object with next method) iterator.next(); // { value: 1, done: false } iterator.next(); // { value: { name: 'younes' }, done: false } console.log("random thing");
- 14. function delay(time = 3000, returnValue) { return new Promise(function(resolve) { setTimeout(resolve.bind(null, returnValue), time); }); } function* generator() { let result = yield delay(2000, "return value"); console.log(result); result = yield delay(2000); console.log(result); } function runtime(generator) { function next(nextVal) { const { value, done } = iterator.next(nextVal); if (done) { console.log("done"); return Promise.resolve(); } if (typeof value.then === "function") { return Promise.resolve(value.then(next)); } } const iterator = generator(); return next(iterator); } runtime(generator);
- 15. function delay(time = 3000, returnValue) { return new Promise(function(resolve) { setTimeout(resolve.bind(null, returnValue), time); }); } function* generator() { let result = yield delay(2000, "return value"); console.log(result); result = yield delay(2000); console.log(result); } function runtime(generator) { function next(nextVal) { const { value, done } = iterator.next(nextVal); if (done) { console.log("done"); return Promise.resolve(); } if (typeof value.then === "function") { return Promise.resolve(value.then(next)); } } const iterator = generator(); return next(iterator); } runtime(generator);
- 16. function delay(time = 3000, returnValue) { return new Promise(function(resolve) { setTimeout(resolve.bind(null, returnValue), time); }); } function* generator() { let result = yield delay(2000, "return value"); console.log(result); result = yield delay(2000); console.log(result); } function runtime(generator) { function next(nextVal) { const { value, done } = iterator.next(nextVal); if (done) { console.log("done"); return Promise.resolve(); } if (typeof value.then === "function") { return Promise.resolve(value.then(next)); } } const iterator = generator(); return next(iterator); } runtime(generator);
- 17. • Runtime for our generators Redux-saga
- 18. • Runtime for our generators • Helpers (aka commands) for managing various operations Redux-saga
- 19. • Runtime for our generators • Helpers (aka commands) for managing various operations • Integrating redux external APIs (channels) Redux-saga
- 20. Show me some code !
- 21. Execution tree sagamiddleware.run Worker API Auth Saga Messages Feed APIs Fork takeLatest Wait for ActionX Race
- 22. Execution tree sagamiddleware.run Worker API Auth Saga Messages Feed APIs sagamiddleware.run Admin Panel Fork takeLatest Wait for ActionX Race Lazy loaded
- 23. Testing ?
- 24. Channels
- 25. Channels • Buffering (waiting dropping upcoming actions)
- 26. Channels • Buffering (waiting dropping upcoming actions) • Communication between sagas
- 27. Channels • Buffering (waiting dropping upcoming actions) • Communication between sagas • Communication with external APIs (firebase webosocket browser APIs …)
- 28. Channels • Buffering (waiting dropping upcoming actions) • Communication between sagas • Communication with external APIs (firebase webosocket browser APIs …) • Abstracting platform code for sharing code react/react- native (geolocation ??)
- 29. • Keep react strictly a view layer (stateless as much as possible) • Keep redux away for the how part • separate what you need from how you get (yes redux saga)