Reflux actions async and sync demo

In this example below you will see how to do a Reflux actions async and sync demo with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 我就看吓不说话, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 我就看吓不说话 ©

Technologies

  • HTML
  • JavaScript
<!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'));

Comments