Does the Flux break component access information from the action creator?
When executing an action in a component, does it break the flow template to access the promise returned from the creator of the action in the component?
Action creators
class MyActionCreators extends Marty.ActionCreators {
create() {
this.dispatch(MyActionConstants.CREATE_ACTION);
return MyActionAPI.create()
.then(res) {
this.dispatch(MyActionConstants.CREATE_ACTION_DONE);
return res;
};
}
}
Compoment
class MyCompoment extends React.Component {
render() {
return(
<div>
<button onChange={ this._clickAction }>Create Me!<button>
</div>
);
}
// private
_clickAction() {
MyActionCreators.create()
// Does this break Flux?
.then((res) => {
this.context.router.transitionTo('some_path', { id: res.id });
});
}
}
Is the repository the only suitable place to access this information needed in the above example?
source to share
Answer
This breaks Flux because it moves state away from the store and has an action directly related to the view.
Possible Solution
After making some assumptions on your system, I'm going to assume that you have one router that you are trying to upgrade.
Note. The examples are not complete, they just give the basic idea. They are also not based on any implementation of the Flux architecture.
Score
Create a store that will contain the ID. A change event must occur in the store.
Example
var Store = function() {
this._id;
Dispatcher.on(MyActionConstants.CREATE_ACTION_DONE, function(payload) {
this._id = payload.id;
this.emit("change");
}.bind(this));
}
Store.prototype.getId = function() {
return this._id;
}
Controller View
Create a controller view (similar to your react component) that will update the router based on the change in the store.
Example
var store = new Store();
store.on('change', function() {
router.transitionTo('some_path', { id: store.getId() })
});
source to share