Reactive Programming with React

The talk I gave at the "Battle of the Titans" meetup at Spilberg.

Transcript

2. { "name": "Robin van der Vleuten", "role": "Indepentent Developer", "stack": [ "PHP", "Symfony", "Laravel", "Javascript", "React (+ Preact)”, "Node.js", "Hapi.js" ], "company": "The Webstronauts", "website": "www.robinvdvleuten.nl", "social": { "twitter": "@robinvdvleuten", "github": "robinvdvleuten" } }
4. function (x) { return x + 1; } function (x, y) { return x + y; }
5. (x) { return x + 1; } (x, y) { return x + y; }
6. (x) { return x + 1; } (x, y) { return x + y; }
7. (x) => { return x + 1; } (x, y) => { return x + y; }
8. (x) => return x + 1; (x, y) => return x + y;
9. x => x + 1; (x, y) => x + y;
10. [1, 2, 3].forEach(x => console.log(x)); forEach()
11. [1, 2, 3].filter(x => x > 2); filter()
12. [1, 2, 3].map(x => x + 1); map()
13. [1, 2, 3].reduce((total, x) => total + x, 0); reduce()
14. Your functions are not dependent on context and should have no “side effects”
15. const addToCart = (cart, item, quantity) => { cart.push({ item, quantity }); return cart; }; an “impure” function
16. const addToCart = (cart, item, quantity) => { return [ ...cart, { item, quantity }]; }; a “pure” function
17. FLUX
19. REDUX Provides predictable state management using actions and reducers
20. REDUCER (state, action) => state (state, action) => state + action.payload
21. ACTION { type: 'CREATE_TODO', payload: 'Build my first Redux app' }
22. DISPATCHING ACTIONS <button onClick={() => dispatch({ type: 'INCREASE' })}> Increase Counter </button>
23. DISPATCHING ACTIONS const increaseCounter = () => ({ type: 'INCREASE' }) <button onClick={() => dispatch(increaseCounter())}> Increase Counter </button>
24. DISPATCHING ACTIONS const increaseeCounter = () => ({ type: 'INCREASE' }) <button onClick={props.increaseCounter}> Increase Counter </button> connect(null, { increaseCounter })(button)
25. const counter = (state = 0, action) => { switch (action.type) { case 'INCREASE': return state + 1; case 'DECREASE': return state - 1; default: return state; } }
26. ASYNCHRONOUS IN JS User interactions (mouse, keyboard, touch, etc) AJAX Timers Animations Web Sockets
27. MIDDLEWARE const logger = store => next => action => { console.log('dispatching', action) let result = next(action) console.log('next state', store.getState()) return result }
28. REDUX-THUNK
29. export const fetchAllAsyncData = () => { return dispatch => { fetchAsyncData(id, (err, data) => { if (err) { dispatch({ type: 'ASYNC_FAILURE', err }); } fetchAsyncData(data.parent, (err, data) => { if (err) { dispatch({ type: 'ASYNC_FAILURE', err }); } fetchAsyncData(data.parent, (err, data) => { if (err) { dispatch({ type: 'ASYNC_FAILURE', err }); } dispatch({ type: 'ASYNC_SUCCESS', data }); }); }); }); } }
30. export const fetchAllAsyncData = () => { return dispatch => { return fetchAsyncData(id) .then(data => { return fetchAsyncData(data.parent); }) .then(data => { return fetchAsyncData(data.parent); }) .then(data => { dispatch({ type: 'ASYNC_SUCCESS', data }); }) .catch(err => { dispatch({ type: 'ASYNC_FAILURE', err }); }); } }
31. • fulfilled - The action relating to the promise succeeded • rejected - The action relating to the promise failed • pending - Hasn't fulfilled or rejected yet • settled - Has fulfilled or rejected And a Promise can only return a single value A Promise can be
33. RXJS
34. /* Get stock data somehow synchronous */ const source = getSyncStockData(); const subscription = source .filter(quote => quote.price > 30) .map(quote => quote.price) .forEach(price => console.log(`Prices higher than $30: ${price}`));
35. /* Get stock data somehow asynchronous */ const source = getAsyncStockData(); const subscription = source .filter(quote => quote.price > 30) .map(quote => quote.price) .subscribe( price => console.log(`Prices higher than $30: ${price}`), err => console.log(`Something went wrong: ${err.message}`) ); /* When we're done */ subscription.dispose()
36. REDUX-OBSERVABLE
37. const pingEpic = action$ => action$.filter(action => action.type === 'PING') .mapTo({ type: 'PONG' }); // later... dispatch({ type: 'PING' });
38. const pingEpic = action$ => action$.ofType(‘PING') .delay(1000) // Asynchronously wait 1000ms then continue .mapTo({ type: 'PONG' }); // later... dispatch({ type: 'PING' });
39. // action creators const fetchUser = username => ({ type: FETCH_USER, payload: username }); const fetchUserFulfilled = payload => ({ type: FETCH_USER_FULFILLED, payload }); // epic const fetchUserEpic = action$ => action$.ofType(FETCH_USER) .mergeMap(action => ajax.getJSON(`https://api.github.com/users/${action.payload}`) .map(response => fetchUserFulfilled(response)) ); // later... dispatch(fetchUser('robinvdvleuten'));
40. describe('fetchUserEpic', () => { it('should return an user object on success', async () => { expect.assertions(2); const user = { username: 'robinvdvleuten' }; const response = Observable.of(forms); const ajax = { getJSON: jest.fn() }; ajax.getJSON.mockReturnValueOnce(response); const actions$ = ActionsObservable.of(fetchUser('robinvdvleuten')); const actions = await epics(actions$, store, { ajax }) .toArray() .toPromise(); expect(actions).toEqual([ { type: FETCH_USER, payload: 'robinvdvleuten' }, { type: FETCH_USER_FULFILLED, user }, ]); expect(request).toHaveBeenCalledWith('https://api.github.com/users/robinvdvleuten'); }); });
41. // action creators const fetchUser = username => ({ type: FETCH_USER, payload: username }); const fetchUserFulfilled = payload => ({ type: FETCH_USER_FULFILLED, payload }); // epic const fetchUserEpic = (action$, getStore, { ajax }) => action$.ofType(FETCH_USER) .mergeMap(action => ajax.getJSON(`https://api.github.com/users/${action.payload}`) .map(response => fetchUserFulfilled(response)) ); // later... dispatch(fetchUser('robinvdvleuten'));
42. With redux-observable one can manage any business logic over any time period
43. @robinvdvleuten