Complex State Handling in Modern Web Apps | Filip Danić @ Voxxed Days Belgrade 2016

Slides from my talk on Redux and Voxxed Days Belgrade 2016 (#vdb16).

Follow me on twitter @DanicFilip or visit my site danicfilip.com

Transcript

1. Complex State Handling in Modern Web Applications Voxxed Days Belgrade 2016 #vdb16
2. *An alternate title: Complex STATE Handling in Modern Web Applications
3. Managing state is hard.
4. State changes over time.
5. The root of all bugs?
6. async is also hard.
7. @DanicFilip, software engineer at SpiceFactory.co
8. Easier to reason. Simpler to manage.
10. Redux A predictable state container
11. Wait, but why? let’s see a few good reasons…
12. A pattern. Not a giant framework.
13. It provides a single source of truth.
14. ACTIONS REDUCERS STORE VIEW strict unidirectional data flow It’s deterministic.
15. ACTIONS REDUCERS STORE VIEW It’s deterministic.
16. Model-view update STATE VIEW UPDATE
17. Immutability.
18. Compassable functions.
19. Cool story, bro. But…
20. Actions. function getProducts(products, timestamp) { return { type: ‘GET_PRODUCTS’, products, timestamp, }; }
21. Actions. const GET_PRODUCTS = ‘@namespace/GET_PRODUCTS’; function getProducts(payload) { return { type: GET_PRODUCTS, payload, }; }
22. State (state, action) => newState
23. State newState = reducer(state, action)
24. Reducers. function productsReducer(state = initialState, action) { switch (action.type) { case GET_PRODUCTS: return Object.assign({}, state, { products: action.payload.products, timestamp: action.payload.timestamp, }); default: return state; } }
25. With Immutable.js function productsReducer(state = initialState, action) { switch (action.type) { case GET_PRODUCTS: return state .set(‘products’, action.payload.products) .set(‘timestamp’, action.payload.timestamp); default: return state; } }
26. The Store. let store = createStore( articleReducer, initialState );
27. The Store. let store = createStore( combineReducers({ firstReducer, secondReducer, }), initialState);
28. Compassable. const middleware = [sagaMiddleware, loggerMiddleware]; const store = createStore( createReducer(), initialState, compose(…applyMiddleware(...middleware)), );
29. Write tests! describe('reducers', () => { describe('products', () => { it('should handle GET_PRODUCTS action', () => { const action = { type: GET_PRODUCTS, products: [{id: 1, title: 'Product 1'}, {id: 2, title: ’Product 2'}], }; expect(products({}, action)).toEqual({byId: {1: {id: 1, title: 'Product 1'}, 2: {id: 2, title: 'Product 2’}}}); }); /…
31. Ok, demo time!
32. Redux… three ducks?
36. Summary. – Actions – Reducers – Store – Compassable(s)
37. Hey, but remember this: async is also hard.
38. Callbacks? Promises?
39. Let’s try redux-saga
40. function* countToN(n) { for (let i = 1; i <= n; i++) {
 yield i; } } const gen = countToN(5); Generators
41. gen.next(); // {value: 1, done: false} gen.next(); // {value: 2, done: false} gen.next(); // {value: 3, done: false} gen.next(); // {value: 4, done: false} gen.next(); // {value: 5, done: false} gen.next(); // {done: true}
42. function* getProducts() { while (true) { const watcher = yield race({ list: take(GET_ALL_PRODUCTS), stop: take(LOCATION_CHANGE), }); if (watcher.stop) break; const { data } = list.payload; const list = yield call(ProductsService.getAll, data); if (list.err) { yield put(getProductsError(list.err)); } else { yield put(getProductsSuccess(list.response)); } } } Saga
43. function* getAll() { const task1 = yield fork(ProductService.getAll, ‘products’) const task2 = yield fork(UserService.getAll, ‘users’) } Forks!
44. function notificationsChannel() { return eventChannel(emitter => { const source = new EventSource(URL); source.addEventListener('message', e => { emitter(JSON.parse(e.data)); }); return () => source.close(); }); } Event Channel
45. function* notificationsSaga() { const channel = yield call(notificationsChannel); while (true) { const notification yield take(channel); yield put(loadNotification(notification)); }); } Event Channel + Saga