React/Flux - 如何扩展商店

阅读Facebook/Flux网站后，他们给出了一个例子，他们拥有'Messages'，'Threads'和'Unread Threads'商店。我的理解是'线程'和'未读线程'在同一个域中。在他们的例子中所做的一点是，你可能想跟踪相同数据的状态，但从不同的上下文？React/Flux - 如何扩展商店

在我的示例中，我正在处理“导线”列表，并根据我使用的组件（或组件的模式）以及我需要查看数据的不同子集。其余的调用接受，我可以很容易地通过提供道具的反应，但这并不觉得自己是一个可扩展的方法一个“过滤器”选项：

<LeadsList filterBy="status:active" />

我只创造了关注的是“积极的”线索，并使用仪表板LeadsList组件这种方式。然而，LeadsList可以在其他地方使用，无需过滤等。这是我的目标。

我的整体问题是：我应该为'主动线索'创建一个单独的商店还是通过一个中央商店过滤？

来源

2015-11-11 backdesk

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

例如，有了回流，我可以为每个逻辑页面设置一个存储，并使用mixins将每个唯一数据集的存储组合到页面存储中。这为我提供了一个关注点，而只需要一个存储由该页面的控件组件处理。

以下是来自https://github.com/calitek/ReactPatterns React.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 = { 
 
\t init() { this.listenTo(AddonStore, this.onAddonTrigger); }, 
 
\t data1: {}, 
 
\t listenables: Actions, 
 
\t mixins: [MixinStoreObject], 
 
\t onGotData1: _GotData, 
 
\t onAddonTrigger() { BasicStore.trigger('data2'); }, 
 
\t getData1() { return this.data1; }, 
 
\t getData2() { return AddonStore.data2; }, 
 
\t getData3() { return this.data3; } 
 
} 
 
const BasicStore = Reflux.createStore(BasicStoreObject); 
 
export default BasicStore;

import React from 'react'; 
 

 
import BasicStore from '../stores/Basic.Store'; 
 

 
let AppCtrlSty = { 
 
\t height: '100%', 
 
\t padding: '0 10px 0 0' 
 
} 
 

 
const getState =() => { 
 
\t return { 
 
\t \t Data1: BasicStore.getData1(), 
 
\t \t Data2: BasicStore.getData2(), 
 
\t \t Data3: BasicStore.getData3() 
 
\t }; 
 
}; 
 

 
class AppCtrlRender extends React.Component { 
 
    \t render() { 
 
\t \t let data1 = JSON.stringify(this.state.Data1, null, 2); 
 
\t \t let data2 = JSON.stringify(this.state.Data2, null, 2); 
 
\t \t let data3 = JSON.stringify(this.state.Data3, null, 2); 
 
\t \t return (
 
\t \t \t <div id='AppCtrlSty' style={AppCtrlSty}> 
 
\t \t \t \t React 1.4 ReFlux with SuperAgent<br/><br/> 
 
\t \t \t \t Data1: {data1}<br/><br/> 
 
\t \t \t \t Data2: {data2}<br/><br/> 
 
\t \t \t \t Data3: {data3}<br/><br/> 
 
\t \t \t </div> 
 
\t \t); 
 
\t } 
 
} 
 

 
export default class AppCtrl extends AppCtrlRender { 
 
\t constructor() { 
 
\t \t super(); 
 
\t \t this.state = getState(); 
 
\t } 
 

 
\t componentDidMount() { this.unsubscribe = BasicStore.listen(this.storeDidChange.bind(this)); } 
 
\t componentWillUnmount() { this.unsubscribe(); } 
 
\t storeDidChange(id) { 
 
\t \t switch (id) { 
 
\t \t \t case 'data1': this.setState({Data1: BasicStore.getData1()}); break; 
 
\t \t \t case 'data2': this.setState({Data2: BasicStore.getData2()}); break; 
 
\t \t \t case 'data3': this.setState({Data3: BasicStore.getData3()}); break; 
 
\t \t \t default: this.setState(getState()); 
 
\t \t } 
 
\t } 
 
}

来源

2015-11-11 16:28:33

React/Flux - 如何扩展商店

回答

相关问题