Reuse / Scalability Issues with Backflow Application

Question

Question:

Is there a way to have a standard flow stream - using Actions and Stores inside the component and still be able to use this component for different purposes or if there is no way to have a complex nested structure in flux-responsive application without spreading each change through a huge callback line?

---

Example (if the question is not clear enough):

Lets say I have a couple of super simple custom components like ToggleButton, Slider, DatePicker and more. They must be reused, so I cannot use any actions inside them, instead I defined callback functions. For example, onChangein DatePicker it works as follows:

this.props.onChange(data);

I have a custom component that allows it to call its InfoBox, which contains a couple of simple components described above. This component listens for changes for each of its children as follows:

<DatePicker ref='startDate' onChange={this.startDate_changeHandler} />

InfoBox is used for different purposes, so I assume that it cannot be tied to a specific store.

Grid, InfoBox. , - , Actions Store.

, - - , , .. , (, ).

, , ( , ).

, , , , DataPicker > InfoBox > Grid > Page > Something else.

Answer 1

, DatePicker Flux. Flux , , " X Z" " Y ".

, , Grid .., .

- . .

, , , - - todo. , , , Grid InfoBox , , . , , .

, , todo. , - :

var TodoActions = {
  markAsComplete: function (todo) {
    alert('Completed: ' + todo.text);
  }
};

var InfoBox = React.createClass({
  render: function() {
    return (
      <div className="infobox">
        {React.createElement(this.props.component, this.props)}
      </div>
    );
  }
});

var Grid = React.createClass({
  render: function() {
    var that = this;
    return (
      <div className="grid">
        {this.props.items.map(function (item) {
          return <InfoBox component={that.props.component} item={item} />;
        })}
      </div>
    );
  }
});

var Todo = React.createClass({
  render: function() {
    var that = this;
    return (
      <div>
        Todo: {this.props.item.text}
        <button onClick={function () { TodoActions.markAsComplete(that.props.item); }}>Mark as complete</button>
      </div>
    );
  }
});

var MyPage = React.createClass({
  getInitialState: function () {
    return {
      todos: [{text: 'A todo'}]
    };
  },
  render: function() {
    return (
      <Grid items={this.state.todos} component={Todo} />
    );
  }
});

React.render(<MyPage />, document.getElementById('app'));

, Grid InfoBox , , , , . InfoBox Todo, Todo todo, InfoBox.

, , , . , , , , . React, . : https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html

. Todo , , , , .

- :

var Todo = React.createClass({
  render: function() {
    var that = this;
    return (
      <div>
        Todo: {this.props.item.text}
        <button onClick={function () { this.props.onCompleted(that.props.item); }}>Mark as complete</button>
      </div>
    );
  }
});

var AppointmentTodo = React.createClass({
  render: function() {
    return <Todo {...this.props} onCompleted={function (todo) { TodoActions.markAsComplete(todo); }} />;
  }
});

var MyPage = React.createClass({
  getInitialState: function () {
    return {
      todos: [{text: 'A todo'}]
    };
  },
  render: function() {
    return (
      <Grid items={this.state.todos} component={AppointmentTodo} />
    );
  }
});

, MyPage pass Todo to Grid AppointmentTodo, -, , Todo . React, , .