Modernizing Legacy Codebases With Redux

These are the slides from the talk I gave at ReactNL on October 13, 2016, and at Reactathon on March 7, 2017.

Transcript

11. ?
13. { audioUrl: http://www.npr.org/audio.mp3, duration: 139, isPlaying: true, ... }
14. { type: Actions.TOGGLE_PLAY }
15. (state, action) => state
16. const player = (state, action) => { switch (action.type) { case Actions.TOGGLE_PLAY: return { ...state, isPlaying: !state.isPlaying }
17. • getState() • dispatch(action) • subscribe(listener)
18. Actions Store Reducer State View (React)
19. Actions Store Reducer State View (React) Middleware
20. const myMiddleware = store => next => action => { // @todo: something useful? return next(action); };
21. const myMiddleware = ({ dispatch, getState }) => next => action => { // @todo: something useful? return next(action); };
23. Actions.TOGGLE_PLAY
24. const outgoing = ({ dispatch, getState }) => next => action => { // @todo: something useful? return next(action); };
25. const outgoing = ({ getState }) => next => action => { // @todo: something useful? return next(action); };
26. const outgoing = ({ getState }) => next => action => { if (action.type === Actions.TOGGLE_PLAY) { $('body').toggleClass('is-playing'); } return next(action); };
28. User selects station
29. const incoming = ({ dispatch, getState }) => next => action => { // @todo: something useful? return next(action); };
30. const incoming = ({ dispatch }) => next => action => { // @todo: something useful? return next(action); };
31. const incoming = ({ dispatch }) => next => action => { if (!inited) { $('document').on('stationChanged', station => dispatch( { type: Actions.STATION_CHANGED, station } )); inited = true; }