0

According to React docs, states should be used for UI state only, thus it's confusing whether data retrieved from Store is UI state or not.

Let's say we got a list of items from the Store and it needs to be rendered to component. Should it be:

  1. Stored as a state
  2. Stored within component's property (requires forceUpdate)

I can also think of data being retrieved from Store within render method, this doesn't require to keep data within component at all, but still does require forceUpdate to be called on Store change.

Roman Liutikov
  • 1,338
  • 10
  • 17

1 Answers1

0

With Flux architecture the flow is unidirectional, which ultimately means that views will never update the store directly. The store provides state to your views. If you are trying to add, remove, update, or delete data from your views, you would trigger an action which would be dispatched to your stores. Your stores then would receive the data being dispatched, do something with that data and emit a 'change' event. All views subscribed to the store will be notified an updated accordingly. For example this is a view.

var Events = React.createClass({
  getInitialState: function() {
    this.store = this.props.context.getStore('EventStore');
    return this.store.getState();
  },

  componentDidMount: function() {
    this.store.addChangeListener(this._setState);
  },

  componentWillUnmount: function () {
    this.store.removeListener('change', this._setState);
  },

  _setState: function () {
    this.setState(this.store.getState());
  }
});

You can follow this tutorial (http://facebook.github.io/flux/docs/todo-list.html) to get a better understanding, but the key and the immediate benefit to using an architecture like FLUX is the unidirectional flow.

TYRONEMICHAEL
  • 4,174
  • 4
  • 30
  • 47
  • This is not a question about how does Flux work, but about efficient way of handling data retrieved from the store. – Roman Liutikov Jan 26 '15 at 12:32
  • And that is exactly what I am trying to show you here. Get your state when the component mounts and retrieve it again when the store emits a change event? What do you exactly mean by an efficient way to retrieve data from the store? You should not have to retrieve it any other way when using stores and React components. And it confuses me why you would retrieve the state from your store in the render method. When you call setState, your component will automatically re-render. – TYRONEMICHAEL Jan 26 '15 at 13:52
  • The case here is to not keep application data within component's state, but render it immediately instead. State is representing UI, but not application data. Best practice is to keep as little data within state as possible, this plays well with performance. – Roman Liutikov Jan 26 '15 at 16:37