Proper way to initialize data [duplicate]

Question

This question already has answers here:

React + Flux: Getting initial state into a store (3 answers)

Closed 4 years ago.

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)?

Answer 1

Reflux has an API for this actually.

The docs are poor at describing it, but Spoike (Reflux's author) gave an answer along with a code example:

https://stackoverflow.com/a/28984512/1775026

Answer 2

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()
    }
});