在Reflux中，带有Promise的Store getters是一种反模式

Question

我开始反流，接受单向流。

也就是说，我很难想象Components必须启动一个操作才能从商店中获取数据。这在我见过的很多例子中都有，但当请求数据而不是被告知有新数据时，这似乎很奇怪。

以下是我的想法：Component以加载状态进行初始化。Component然后调用Store上的getter，该getter返回具有用新数据填充Component状态的success回调和用错误填充Component状态的reject的Promise。如果有东西更新了Store，我会继续listenTo和Store，但我的回调与初始Promise中使用的success相同。

这看起来像是对Promises的直接实现，但这是Reflux中的反模式吗？我知道我们不想改变Store中的数据，但我很难理解为什么Action需要参与简单的获取。

有人能纠正我吗？

Answer 1

我使用了一个由api.store侦听的操作。api.store是唯一访问util/api.js对象的地方，该对象实际处理对服务器的调用。当服务器响应时，会发出另一个操作，该操作由该数据的data.store侦听。然后，存储将发出由控制组件侦听的信号。然后，控制组件从存储中请求数据。这可能看起来很复杂，但关注点的分离使得代码非常易于维护。

'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') );

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;

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(); }) },
};

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;

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); }
	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());
		}
	}
}

发件人https://github.com/calitek/ReactPatterns.