Managing Asynchronicity in Redux

Managing Asynchronicity in Redux
Why do I need a state management library?
Redux: What, Why, and How?
Asynchronicity in Javascript using Promises and Generators
Popular libraries for managing side effects
Redux-thunk
Redux-saga

Transcript

1. Managing Asynchronicity in Redux
2. Agenda • • • • • •
3. Why a state management library?
4. Redux A predictable state container for JavaScript apps
5. Why?
6. How? Store The state of the whole application is stored in a single object tree. The store acts a single source of truth for the application. Actions The state is read-only and any mutation to the state can only be done by emitting actions. These objects define what happened and are used to send data from user interactions, API calls, etc. to the Redux store. • Action Creators: Functions that return action objects. Reducers These are pure functions that specify state of an application changes in response to an action sent to the store.
8. A Todo Example in Vanilla Javascript https://codesandbox.io/s/myr3mp190x
9. Asynchronicity in JavaScript
10. Promises // Promise constructor const promiseObj = new Promise((resolve, reject) => { setTimeout(() => resolve("This is an async message "), 1000); }); //Usage promiseObj.then(msg => { //do something with msg console.log(msg); }).catch(err => { // handle err }); // Fetch api example (valid in browser environments) fetch("https://swapi.co/api/people/2 ").then(rawResp => rawResp.json()).then(resp => { console.log(resp); });
11. Generators Generators are functions which can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances. When combined with promises, provides a very powerful paradigm for asynchronous code. Async functions are based on top of this. - MDN Docs // Generator function function* checkInNotifier(name) { yield `Hello ${name}, Welcome to Delhi!` ; yield `Hey ${name}, Welcome to Mumbai!` ; yield `${name}, Welcome to Pune!` ; } // Usage const notifier = checkInNotifier("React"); console.log(notifier.next().value); // Hello React, Welcome to Delhi! console.log(notifier.next().value); // Hey React, Welcome to Mumbai! console.log(notifier.next().value); // React, Welcome to Pune! console.log(notifier.next().value); // undefined
12. Managing Side Effects in Redux
14. • • • • • Popular Addons for managing side-effects
15. Redux Thunk
16. const store = createStore (state); const SET_MESSAGE = "SET_MESSAGE "; function setMessage(message) { return { type: SET_MESSAGE, payload: message }; } store.dispatch(setMessage("This is an sync message ")); // With thunk middleware, you can do following function setMessageAsync (message) { return dispatch => { setTimeout(() => { dispatch(setMessage(message)); }, 1000); }; } store.dispatch(setMessageAsync ("This is an async message "));
17. Redux-thunk Example https://codesandbox.io/s/o4zq6vnylq
18. Redux Sagas
19. const sagaMiddleware = createSagaMiddleware (); const store // create store with saga middleware const SET_MESSAGE = "SET_MESSAGE"; const SET_MESSAGE_REQUEST = 'SET_MESSAGE_REQUEST '; function setMessage(message) { return { type: SET_MESSAGE, payload: message }; } function setMessageRequest (message) { return { type: SET_MESSAGE_REQUEST, payload: message }; } function* setMessageAsyncWatcher () { yield takeEvery(SET_MESSAGE_REQUEST, setMessageAsync); } function* setMessageAsync (action) { yield delay(1000); yield put(setMessage(action.payload)); } sagaMiddleware. run(setMessageAsyncWatcher) store.dispatch(setMessageRequest ("This is an async message "));
20. Redux-sagas Example https://codesandbox.io/s/z6q5w55r0p
21. THANK YOU https://linkedin.com/in/tomardivyanshu/ https://twitter.com/divyanshutomar https://github.com/divyanshutomar