<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Reflux actions async and sync demo</title>
</head>
<body>
<div id="app"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/reflux/5.0.3/reflux.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/ystarlongzi/reflux-actions-async-and-sync-demo-VPZByQ */
var actions = Reflux.createActions({
'update': {
sync: true
}
});
var store = Reflux.createStore({
getInitialState: function getInitialState() {
return {
query: 'search'
};
},
listenables: actions,
onUpdate: function onUpdate(val) {
this.trigger({
query: val
});
}
});
var ComponentA = React.createClass({
displayName: 'ComponentA',
mixins: [Reflux.connect(store, 'form')],
render: function render() {
var form = this.state.form;
return React.createElement(
'div',
null,
'componentA, with Store:',
React.createElement('input', {
type: 'text',
value: form.query,
onChange: function onChange(e) {
actions.update(e.target.value);
}
})
);
}
});
var ComponentB = React.createClass({
displayName: 'ComponentB',
getInitialState: function getInitialState() {
return {
form: {
query: 'hehe'
}
};
},
render: function render() {
var _this = this;
var form = this.state.form;
return React.createElement(
'div',
null,
'componentB, without Store:',
React.createElement('input', {
type: 'text',
value: form.query,
onChange: function onChange(e) {
_this.setState({
form: {
query: e.target.value
}
});
}
})
);
}
});
var App = React.createClass({
displayName: 'App',
getInitialState: function getInitialState() {
return {
show: 'A'
};
},
render: function render() {
var _this2 = this;
var state = this.state;
return React.createElement(
'div',
null,
React.createElement(
'button',
{ onClick: function onClick() {
_this2.setState({ show: 'A' });
} },
'display A'
),
React.createElement(
'button',
{ onClick: function onClick() {
_this2.setState({ show: 'B' });
} },
'display B'
),
React.createElement('br', null),
React.createElement('br', null),
state.show == 'A' && React.createElement(ComponentA, null),
state.show == 'B' && React.createElement(ComponentB, null)
);
}
});
ReactDOM.render(React.createElement(App, null), document.querySelector('#app'));