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

Scaling Flux

Scaling Flux

Flux is a great for managing data across your React application; however, when apps grow in complexity Flux can become unruly. Stores quickly develop messy dependencies with each other and it becomes extremely difficult to reason about your application. While developing a highly extensible email client we found an extremely effective way to manage Store complexity was to consolidate data into singular Centralized Data Store. It became a single source of truth that made our app easier to reason about, more robust, and scalable.

This was a talk for the React NYC Meetup on May 28, 2015.

30ac27c2768b1df077c5f236936bd256?s=128

Evan Morikawa

May 28, 2015
Tweet

Transcript

  1. Evan Morikawa @E0M Evan@Nylas.com N Y C

  2. None
  3. None
  4. <MessageList />

  5. Store Element Dispatcher e.g. MessageStore e.g. <MessageList />

  6. Store Element Dispatcher e.g. MessageStore e.g. <MessageList />

  7. Store Element Dispatcher e.g. MessageStore e.g. <MessageList />

  8. Store Element Dispatcher e.g. MessageStore e.g. <MessageList />

  9. Store Element Dispatcher e.g. MessageStore e.g. <MessageList />

  10. Store Element Dispatcher e.g. MessageStore e.g. <MessageList />

  11. MessageStore

  12. ThreadStore MessageStore

  13. DraftStore MessageStore ThreadStore

  14. MessageStore ThreadStore DraftStore

  15. LanguageStore MessageStore ThreadStore DraftStore

  16. MessageStore ThreadStore DraftStore LanguageStore

  17. waitsFor()

  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. None
  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. SQLite

  36. None
  37. Evan Morikawa | @E0M | evan@nylas.com

  38. MessageStore = Reflux.createStore init: -> @listenTo Actions.expandMessage, @onExpandMessage

  39. MessageStore = Reflux.createStore init: -> @listenTo Actions.expandMessage, @onExpandMessage @listenTo DraftStore,

    @updateAndTrigger updateAndTrigger: -> … @trigger()
  40. MessageStore = Reflux.createStore init: -> @listenTo Actions.expandMessage, @onExpandMessage @listenTo DraftStore,

    @updateAndTrigger @listenTo ThreadStore, @updateAndTrigger updateAndTrigger: -> … @trigger()
  41. MessageStore = Reflux.createStore init: -> @listenTo Actions.expandMessage, @onExpandMessage @listenTo DraftStore,

    @updateAndTrigger @listenTo ThreadStore, @updateAndTrigger @listenTo websocket, @updateAndTrigger updateAndTrigger: -> … @trigger()
  42. MessageStore = Reflux.createStore init: -> @listenTo Actions.expandMessage, @onExpandMessage @listenTo DataStore,

    @refreshFromDB updateAndTrigger: -> … @trigger()
  43. class MessageList extends React.Component

  44. class MessageList extends React.Component render: -> … @state.messages.map (msg) ->

    <MessageItem msg={msg} />
  45. class MessageList extends React.Component render: -> … @state.messages.map (msg) ->

    <MessageItem msg={msg} /> componentDidMount: -> MessageStore.listen @onStoreChange
  46. class MessageList extends React.Component render: -> … @state.messages.map (msg) ->

    <MessageItem msg={msg} /> componentDidMount: -> MessageStore.listen @onStoreChange onStoreChange: -> @setState @getStateFromMessageStore()
  47. class MessageList extends React.Component render: -> … @state.messages.map (msg) ->

    <MessageItem msg={msg} /> componentDidMount: -> MessageStore.listen @onStoreChange onStoreChange: -> @setState @getStateFromMessageStore() getStateFromMessageStore: -> messages: MessageStore.messagesFor(@props.threadId)
  48. class MessageList extends React.Component render: -> … @state.messages.map (msg) ->

    <MessageItem msg={msg} /> componentDidMount: -> MessageStore.listen @onStoreChange onStoreChange: -> @setState @getStateFromMessageStore() getStateFromMessageStore: -> messages: MessageStore.messagesFor(@props.threadId) constructor: (@props) -> @state = @getStateFromMessageStore()