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 - 如何擴展商店

回答

相關問題