Upgrade to Pro — share decks privately, control downloads, hide ads and more …

State is the source of all bugs

State is the source of all bugs

Learn what Redux is and how you can follow the redux architecture to scale and organize your applications.

Vince Speelman

April 14, 2018
Tweet

More Decks by Vince Speelman

Other Decks in Technology

Transcript

  1. 2

  2. 2

  3. 4

  4. 5

  5. 6

  6. 7

  7. 8

  8. 9

  9. 10

  10. 15 State is the source of all bugs. Pretty much.

    At least the weird ones that aren’t browser- related.
  11. 16

  12. 19

  13. 23 • JavaScript — redux • .NET — redux.NET •

    Java — reductor • Swift — ReSwift • Objective-C — Reflow • PHP — php-redux • ruby — redux.rb
  14. 37 action (state, { type, payload }) => { switch

    (type) { case VIDEO.PLAY.REQUESTED: return { ...state, loading: true, }; …
  15. 38 action import { union } from ‘tagmeme’; const VideoPlayer

    = union([‘Requested’, ‘Fulfilled’, ‘Rejected’]); (state, action) => VIDEO_PLAYER.match( action, { Requested: () => ({ ...state, loading: true }), Fulfilled: () => ({ ...state, loading: false, status: ‘PLAYING’ }), Rejected: (error) => ({ ...state, loading: false, error }), }, );
  16. 39 action (state, { type, payload }) => { switch

    (type) { case VIDEO.PLAY.REQUESTED: return { ...state, loading: true, }; …
  17. 43

  18. 45 ui const VideoPlayer = ({ status, onPlay, onPause })

    => ( <View> {status !== ‘PLAYING’ ? ( <Button onClick={onPlay}>play</Button> ) : ( <Button onClick={onPause}>pause</Button> )} <VideoScreen … /> </View> );
  19. 46 ui connect(state => ({ status: state.status, }), dispatch =>

    ({ onPlay: () => dispatch(VIDEO.PLAY.REQUESTED), onPause: () => dispatch(VIDEO.PAUSE.REQUESTED), })(VideoPlayer),
  20. 52 { users: { entities: [ 1: { id: 1,

    name: ‘Sam Hanes’, email: ‘[email protected]', }, ], result: [1], }, },
  21. 53 const entify = d => d.reduce((a,c) => ({ ...a,

    entities: { ...a.entities, [c.id]:c, }, result: [...a.result, c.id], }),{});
  22. 64 auth middleware const authMiddleware = store => next =>

    action => { if (action.type === 'LOGIN') { return legacy.login(action.payload).then(res => next({ ...action, payload: res, }) ); } return next(action); }
  23. 70 • JavaScript — redux • .NET — redux.NET •

    Java — reductor • Swift — ReSwift • Objective-C — Reflow • PHP — php-redux • ruby — redux.rb