Question

阅读Facebook / Flux网站，他们举了一个例子，他们有“消息”，“主题”和“未读主题”的商店。我的理解是'Threads'和'Unread Threads'属于同一个域。在他们的示例中提出的观点是，您可能希望跟踪来自不同上下文的相同数据的状态？

在我的示例中，我正在使用“引导”列表，并且取决于我正在使用的组件（或组件的模式），我需要查看数据的不同子集。 REST调用接受一个'过滤器'选项，我可以通过反应道具轻松提供这个选项，但这不是一种可扩展的方法：

<LeadsList filterBy="status:active" />

我创建的仪表板仅关注“活动”潜在客户，并以这种方式使用LeadsList组件。但是，LeadsList可以在其他地方使用而无需过滤等。这是我的目标。

我的总体问题是：我应该为“有效线索”创建单独的商店还是通过一个中央商店进行过滤？

Answer 1

没有一种正确的方法可以做到这一点。您可以在服务器或客户端上处理过滤器。您可以使用一个或多个商店。对于大型数据集，最好在服务器上进行处理。对于较小的数据集，客户端上的处理应该没问题。您使用的商店数量取决于您在概念上管理数据的方式。超越功能的目标是清晰度和可维护性。

例如，对于回流，我可以为每个逻辑页面提供一个存储，并使用mixins将每个唯一数据集的存储组合到页面存储中。这为我提供了一个问题分离，同时只需要一个商店由该页面的控制组件处理。

以下是来自https://github.com/calitek/ReactPatterns React.14 / ReFluxSuperAgent。

的示例

＆＃13;

import Reflux from 'reflux';

import Actions from '../actions/sa.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;

＆＃13;

import React from 'react';

import BasicStore from '../stores/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());
		}
	}
}

＆＃13;

React / Flux - 如何扩展商店

1 个答案: