8

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

Matti John
  • 19,329
  • 7
  • 41
  • 39
srph
  • 1,312
  • 17
  • 35

2 Answers2

10

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()
    }
});
Matti John
  • 19,329
  • 7
  • 41
  • 39
  • Just a question: If I am using refluxjs with react-router, what happens if the promise was rejected; Is the mounting halted (technically, nothing happens) or is it handled manually? – srph Jan 23 '15 at 06:19
  • The component will still mount, the call to the action is fire and forget. If the promise is rejected, the store will still receive the result and you can add a `onInitFailed` handler. See https://github.com/spoike/refluxjs#asynchronous-actions for more about the async actions. – Matti John Jan 23 '15 at 09:11
  • Thanks. By the way, do you refer to ```componentWillMount``` rather than ```onComponentWillMount```? – srph Jan 23 '15 at 13:42
  • oops, sorry it's `componentWillMount`, I'll fix the answer – Matti John Jan 23 '15 at 13:46
  • There are at least a couple of problems with this code snippet which threw me off for a while.Firstly, `componentWillMount` expects a function. Also, should `actions.load.listen...` be `actions.init`? – Alex York Mar 12 '15 at 08:09
  • @AlexYork you are right, I wrote this quite hastily. – Matti John Mar 12 '15 at 13:55
  • This is incorrect. It doesn't use the API that Reflux has out of the box. See my answer below. – wle8300.com Aug 01 '15 at 03:28
  • No, it's not incorrect. This is the way recommended by React's documentation. You should not be making async requests in `getInitialState`. – Matti John Aug 03 '15 at 00:35
-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

Community
  • 1
  • 1
wle8300.com
  • 2,588
  • 1
  • 23
  • 29
  • This question was about fetching data asynchronously. Reflux sets the store's `getInitialState` method on the React components and should not be used for fetching data asynchronously. The example in the answer you linked to is for static values. See the official React [documentation](https://facebook.github.io/react/tips/initial-ajax.html) for an example and http://stackoverflow.com/questions/26615307 – Matti John Aug 03 '15 at 00:32