Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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.

Evan Morikawa

May 28, 2015
Tweet

More Decks by Evan Morikawa

Other Decks in Technology

Transcript

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

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

    @updateAndTrigger @listenTo ThreadStore, @updateAndTrigger @listenTo websocket, @updateAndTrigger updateAndTrigger: -> … @trigger()
  3. class MessageList extends React.Component render: -> … @state.messages.map (msg) ->

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

    <MessageItem msg={msg} /> componentDidMount: -> MessageStore.listen @onStoreChange onStoreChange: -> @setState @getStateFromMessageStore()
  5. 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)
  6. 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()