Search code examples
javascriptreactjsfluxrefluxjs

Proper way to initialize data


What is the proper way to initialize data (asynchronously) with RefluxJS? Is there something similar to AngularJS' resolves, or the Flux implementation has nothing to do with this (The router should be handling this reponsibility)?


Solution

  • In your application's top-level component, use the comoponentWillMount method (docs) to trigger an action that fetches the data. This method will get called when the component is initially rendered.

    For example:

    // Create an async action, that will request data using a promise
    // Using the recently released (v0.2.2) helpers for async actions
    var actions = Reflux.createActions({
        init: {asyncResult: true}
    });
    actions.init.listenAndPromise(promiseToGetData);
    
    // Update the store when the init action's promise is completed
    var store = Reflux.createStore({
        listenables: actions,
        onInitCompleted: function (data) { 
            // do stuff 
            this.trigger(data)
        }
    });
    
    var App = React.createClass({
        mixins: [Reflux.connect(store)],
        componentWillMount: function () {
           // When this component is loaded, fetch initial data
           actions.init()
        }
    });