React/Flux-如何扩展存储

React/Flux - How to scale stores

本文关键字：扩展 存储 何扩展 Flux- React      更新时间：2023-09-26

阅读Facebook/Flux网站时，他们给出了一个示例，其中存储了"消息"、"线程"answers"未读线程"。我的理解是"线程"answers"未读线程"在同一个域内。在他们的例子中提出的观点是，你可能想跟踪来自不同上下文的相同数据的状态？

在我的例子中，我使用的是一个"潜在客户"列表，根据我使用的组件（或组件的模式），我需要查看不同的数据子集。REST调用接受一个"过滤器"选项，我可以通过react props轻松提供该选项，但这感觉不像是一种可扩展的方法：

<LeadsList filterBy="status:active" />

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

我的总体问题是：我应该为"活跃潜在客户"创建一个单独的商店，还是通过一个中心商店进行筛选？

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

例如，对于反流，我可以为每个逻辑页面设置一个存储，并使用mixin将每个唯一数据集的存储组合到页面存储中。这为我提供了一种关注点分离，同时只需要由该页面的控制组件处理一个存储。

以下是中的一个示例https://github.com/calitek/ReactPatternsReact.14/ReFluxSuperAgent.

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;

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

相关文章：