score:1

it will make your app easier to build and maintain if you include the flux pattern. i suggest you take a look at some of the starter projects and pick one that compliments your own style. here is an example from https://github.com/calitek/reactpatterns react.14/refluxsuperagent. it may seem complex but the pattern offers a good separation of concerns and flexibility.

server.js

'use strict';

let bodyparser = require('body-parser');
let express = require('express');
let favicon = require('serve-favicon');

let path = require('path');
let port = number(3500);

let routes = require('./routes');

let app = express();
let server = app.listen(port);

app.use(bodyparser.json());
app.use(bodyparser.urlencoded({ extended: false }));

app.use('/', express.static('ui-dist'));
app.use('/routes', routes);

app.use(favicon(path.join(__dirname, '..', 'ui-dist', 'img', 'favicon.ico')));
app.get('/', function(req, res){ res.sendfile(__dirname + '/index.html', [], null); });
routes.js

'use strict';

let express = require('express');
let router = express.router();

let getsetdata = require('./routes/getsetdata');

router.get('/getdata', function(req, res) {
	let getdatadone = function(data){ res.send(data); };
	getsetdata.getdata(getdatadone);
});

router.post('/setdata', function(req, res) {
	let setdatadone = function(data){ res.send(data); };
	console.log(req.body);
	getsetdata.setdata(req.body, setdatadone);
});

module.exports = router;

getsetdata.js

'use strict';

var fs = require('fs');

var rootdatapath = './data';

var getdata = function(donecallback) {
	var filepath = rootdatapath + '/basic.json';
	var jsonreadcallback = function(err, data){
		if (err) donecallback('data readfile error ' + filepath);
		else {
			var jsondata = json.parse(data.tostring());
			donecallback(jsondata);
		}
	};
	fs.readfile(filepath, jsonreadcallback);
};

var setdata = function(data, donecallback) {
	var filepath = rootdatapath + '/basic.json';
	var writefilecallback = function (err) {
		if (err) console.log('error saving data.json file ');
		donecallback('ok');
	};
	fs.writefile(filepath, json.stringify(data, null, 2), writefilecallback);
};

module.exports.getdata = getdata;
module.exports.setdata = setdata;

index.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>reactpatterns-refluxwebsocket</title>

		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css">
		<link rel="stylesheet" href="app.min.css"/>

	</head>
	<body class="bodystyle main">

		<header class="text-center header" >
			<span class="title">reactpatterns-refluxsuperagent by janaka</span>
		</header>

		<section id="react" class="content"></section>

		<script src="app.min.js"></script>

	</body>
</html>

app.js

'use strict';

import react  from 'react';
import reactdom  from 'react-dom';

import appctrl from './components/app.ctrl.js';
import actions from './flux/actions';
import apistore from './flux/api.store';

window.reactdom = reactdom;

actions.apiinit();

reactdom.render( <appctrl />, document.getelementbyid('react') );

api.store.js

import reflux from 'reflux';

import actions from './actions';
import apifct from './../utils/api.js';

let apistoreobject = {
	newdata: {
		"react version": "0.14",
		"project": "refluxsuperagent",
		"currentdatetime": new date().tolocalestring()
	},
	listenables: actions,
	apiinit() { apifct.setdata(this.newdata); },
	apiinitdone() { apifct.getdata(); },
	apisetdata(data) { apifct.setdata(data); }
}
const apistore = reflux.createstore(apistoreobject);
export default apistore;

api.js

import request from 'superagent';

import actions from '../flux/actions';

let uri = 'http://localhost:3500';

module.exports = {
	getdata() { request.get(uri + '/routes/getdata').end((err, res) => { this.gotdata(res.body); }); },
	gotdata(data) { actions.gotdata1(data); actions.gotdata2(data); actions.gotdata3(data); },
	setdata(data) { request.post('/routes/setdata').send(data).end((err, res) => { actions.apiinitdone(); }) },
};

basic.store.js

import reflux from 'reflux';

import actions from './actions';
import addonstore from './addon.store';
import mixinstoreobject from './mixin.store';

function _gotdata(data) { this.data1 = data; basicstore.trigger('data1'); }

let basicstoreobject = {
	init() { this.listento(addonstore, this.onaddontrigger); },
	data1: {},
	listenables: actions,
	mixins: [mixinstoreobject],
	ongotdata1: _gotdata,
	onaddontrigger() { basicstore.trigger('data2'); },
	getdata1() { return this.data1; },
	getdata2() { return addonstore.data2; },
	getdata3() { return this.data3; }
}
const basicstore = reflux.createstore(basicstoreobject);
export default basicstore;

app.ctrl.js

import react from 'react';

import basicstore from './../flux/basic.store';

let appctrlsty = {
	height: '100%',
	padding: '0 10px 0 0'
}

const getstate = () => {
	return {
		data1: basicstore.getdata1(),
		data2: basicstore.getdata2(),
		data3: basicstore.getdata3()
	};
};

class appctrlrender extends react.component {
 	render() {
		let data1 = json.stringify(this.state.data1, null, 2);
		let data2 = json.stringify(this.state.data2, null, 2);
		let data3 = json.stringify(this.state.data3, null, 2);
		return (
			<div id='appctrlsty' style={appctrlsty}>
				react 1.4 reflux with superagent<br/><br/>
				data1: {data1}<br/><br/>
				data2: {data2}<br/><br/>
				data3: {data3}<br/><br/>
			</div>
		);
	}
}

export default class appctrl extends appctrlrender {
	constructor() {
		super();
		this.state = getstate();
	}

	componentdidmount() { this.unsubscribe = basicstore.listen(this.storedidchange.bind(this)); }
	componentwillunmount() { this.unsubscribe(); }
	storedidchange(id) {
		switch (id) {
			case 'data1': this.setstate({data1: basicstore.getdata1()}); break;
			case 'data2': this.setstate({data2: basicstore.getdata2()}); break;
			case 'data3': this.setstate({data3: basicstore.getdata3()}); break;
			default: this.setstate(getstate());
		}
	}
}


Related Query

More Query from same tag