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.

Transcript

1. Evan Morikawa @E0M Evan@Nylas.com N Y C
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()
35. SQLite
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()