LET’S FIGHT REDUX SIDE-EFFECTS SHOWDOWN ANKITA KULKARNI, RANGLE.IO @KULKARNIANKITA9

REDUX IS THE PREFERRED 
 STATE-MANAGEMENT LIBRARY

WHAT ARE 
 SIDE-EFFECTS?

POPULARITY ⭐ REDUX THUNKS ⭐~11K REDUX OBSERVABLES ⭐~6K REDUX 
 SAGAS ⭐~16K

LET’S LOOK AT LOGIN

AT FIRST, 
 LOGIN IS SIMPLE

No content

AT FIRST, LOGIN IS SIMPLE LOGIN SUCCESS LOGIN 
 FAILURE LOGIN REQUEST ActionType.LOGIN_REQUEST ActionType.LOGIN_FAILURE ActionType.LOGIN_SUCCESS

DECLARING AN ACTION const loginRequest = (username, password) => ({ type: ActionType.LOGIN_REQUEST, payload: { username, password } }); const loginSuccess = user => ({ type: ActionType.LOGIN_SUCCESS, payload: user, }); const loginFailure = err => ({ type: ActionType.LOGIN_FAILURE, payload: err, error: true, });

LISTEN TO THOSE ACTIONS IN REDUCER // Reducer that takes in initialState and action function login(state = initialState, action) { switch (action.type) { case ActionType.LOGIN_SUCCESS: return { user: action.payload.user } case ActionType.LOGIN_FAILURE: return { err: action.payload.err, user: null} default: // always return the state if something were to go wrong! return state } }

No content

THINGS GET REALLY INTERESTING WITH ASYNC… LOGIN SUCCESS LOGIN 
 FAILURE ASYNC 
 REQUEST LOGIN REQUEST (

No content

REDUX THUNKS PROMISES REDUX 
 SAGAS WORKER + WATCHER REDUX OBSERVABLES EPIC (TYPE + OPERATORS) MENTAL MODEL

EXAMPLE PLEASE…

THUNKS const loginThunk = (username, password) => dispatch => { dispatch(loginRequest(username, password)); return function (dispatch) { return loginUserApiCall(username, password).then(user => { dispatch(loginSuccess(user)); }, err => dispatch(loginFailure(err)) ); }; }

THUNKS const loginThunk = (username, password) => dispatch => { dispatch(loginRequest(username, password)); return function (dispatch) { return loginUserApiCall(username, password).then(user => { dispatch(loginSuccess(user)); }, err => dispatch(loginFailure(err)) ); }; }

THUNKS const loginThunk = (username, password) => dispatch => { dispatch(loginRequest(username, password)); return function (dispatch) { return loginUserApiCall(username, password).then(user => { dispatch(loginSuccess(user)); }, err => dispatch(loginFailure(err)) ); }; }

SAGAS import { call, put, take } from 'redux-saga/effects'; function* loginUserWorker(action) { try { const { username, password } = action.payload; const user = yield call(loginUserApiCall, username, password); yield put(loginSuccess(user)); } catch (e) { yield put(loginFailure(e)); } } function* loginUserWatcher() { yield take(ActionType.LOGIN_REQUEST, loginUserWorker); }

OBSERVABLES import { of } from "rxjs"; import { mergeMap, mapTo, map } from "rxjs/operators"; const loginRequestEpic = action$ => action$.pipe( ofType(ActionType.LOGIN_REQUEST), mergeMap(action => { const { username, password } = action.payload; return loginUserApiCall(username, password) }), mergeMap(res => of(loginSuccess(res))) catchErr(err => of(loginFailure(err))) );

OBSERVABLES import { of } from "rxjs"; import { mergeMap, mapTo, map } from "rxjs/operators"; const loginRequestEpic = action$ => action$.pipe( ofType(ActionType.LOGIN_REQUEST), mergeMap(action => { const { username, password } = action.payload; return loginUserApiCall(username, password) }), mergeMap(res => of(loginSuccess(res))) catchErr(err => of(loginFailure(err))) );

OBSERVABLES import { of } from "rxjs"; import { mergeMap, mapTo, map } from "rxjs/operators"; const loginRequestEpic = action$ => action$.pipe( ofType(ActionType.LOGIN_REQUEST), mergeMap(action => { const { username, password } = action.payload; return loginUserApiCall(username, password) }), mergeMap(res => of(loginSuccess(res))) catchErr(err => of(loginFailure(err))) );

REAL LIFE IS HARD…

THIS IS HOW IT ENDS UP LOOKING LIKE… LOGIN SUCCESS LOGIN 
 FAILURE ASYNC 
 REQUEST LOGIN REQUEST ( LOG ANALYTICS LOAD DATA FOR DASHBOARD CHECK ACCESS CONTROL LOAD USER PROFILE DO MORE STUFF…

USERS ARE VERY NOTORIOUS

LET’S LOOK AT A COMPLEX EXAMPLE

No content

CANCELING REQUESTS

THUNKS It is very hard to cancel requests in thunks

SAGAS import { call, put, fork, cancel, takeEvery } from 'redux-saga/effects'; function* watchMovieWorker(action) { try { const { query } = action.payload; const user = yield call(loadMovieApiCall, query); yield put(watchMovieSuccess(user)); } catch (e) { yield put(watchMovieFailure(e)); } } function* watchMovieWatcher() { while (yield take(ActionType.WATCH_MOVIE_REQUEST)){ const bgWatchMovieTask = yield fork(watchMovieWorker); yield take(ActionType.WATCH_MOVIE_CANCELLED); yield cancel(bgWatchMovieTask); } }

OBSERVABLES const watchMovieRequestEpic = (action$, state$) => action$.pipe( ofType(ActionType.WATCH_MOVIE_REQUEST), delay(2000), mergeMap(action => { const { query } = action.payload; return loadMovieApiCall(query); }), mergeMap(res => of(watchMovieSuccess(res))), takeUntil(action$.pipe(ofType(ActionType.WATCH_MOVIE_CANCELLED))), catchError(err => { return of(watchMovieFailure(err)) }), repeat() );

DOING MANY THINGS AT ONCE

THIS IS JUST THE BEGINNING… LOG ANALYTICS LOAD MOVIES FOR DASHBOARD CHECK ACCESS CONTROL LOAD USER PROFILE DO MORE STUFF… LOGIN SUCCESS

LET’S FOCUS ON 2 LOG ANALYTICS LOAD MOVIES FOR DASHBOARD CHECK ACCESS CONTROL LOAD USER PROFILE DO MORE STUFF… LOGIN SUCCESS

THUNKS const netflixThunk = (username, password) => dispatch => { dispatch(loginRequest(username, password)); return function (dispatch) { return loginUserApiCall(username, password).then(user => { dispatch(loginSuccess(user)); return watchMovieApiCall().then(movie => { dispatch(watchMovieSuccess(movie)); return logAnalytics().then(data => { dispatch(logAnalyticsSuccess(data)); }, err => dispatch(logAnalyticsFailure(err)); }, err => dispatch(watchMovieFailure(err)); }, err => dispatch(loginFailure(err)) ); }; }

const netflixThunk = (username, password) => dispatch => { dispatch(loginRequest(username, password)); return function (dispatch) { return loginUserApiCall(username, password).then(user => { dispatch(loginSuccess(user)); return watchMoviesApiCall().then(movie => { dispatch(watchMovieSuccess(movie)); return logAnalytics().then(data => { dispatch(logAnalyticsSuccess(data)); }, err => dispatch(logAnalyticsFailure(err)); }, err => dispatch(watchMovieFailure(err)); }, err => dispatch(loginFailure(err)) ); }; }

SAGAS function* watchMovieWorker() { ... } function* logAnalyticsWorker() { ... } function* watcher() { const movies = yield* watchMovieWorker() yield put(ActionType.WATCH_MOVIE) const analytics = yield* logAnalyticsWorker() yield put(ActionType.LOG_ANALYTICS) }

OBSERVABLES const logAnalyticsEpic = action$ => action$ .ofType(ActionType.LOGIN_SUCCESS) .reduce(logAnalytics) .flatMap(events => Observable.merge( events, ActionType.LOG_ANALYTICS)); const watchMovieEpic = action$ => action$ .ofType(ActionType.LOGIN_SUCCESS) .reduce(watchMovie) .map(movies => ActionType.WATCH_MOVIES) LOGIN SUCCESS

SUMMARY Sagas: Pros: ‣ Got to dispatch a separate action to run ‣ ES6 generator knowledge ‣ Easy to test ‣ Has cancellation ‣ Flexible with saga effects - fork, spawn, cancel, throttle Cons: ‣ ES6 generator knowledge ‣ Can be harder to maintain if not done right ‣ As app scales, harder to do cancellation Thunks: Pros: ‣ Really easy to understand ‣ Can be used for smaller projects Cons: ‣ Return promises ‣ Promises cannot be cancelled ‣ Hard to test as you are testing functions ‣ Tightly coupled ‣ Hard to reuse ‣ is a function that returns a function ‣ Call back hell ‣ Too much nesting ‣ Code readability ‣ No way to cancel, debounce, retry Observables: Pros: ‣ You got to filter from a set of actions ‣ Rx js knowledge ‣ Can be transformed ‣ Can be re-used very easily ‣ Built-in debounce, throttle, ‣ Are lazy so you can retry, repeat ‣ Epic - actions in, actions out ‣ Are very powerful Cons: ‣ Testing is a bit more difficult than sagas ‣ RxJS has a huge learning curve ‣ Not all apps need that much power

No content

WINNER ✨ REDUX SAGAS
 ⭐

No content

THANK YOU @KULKARNIANKITA9