如何從商店或服務器獲取React Flux中的數據？

什麼是最好的方式來調用Flux商店的一些數據，並得到它，如果它有或打電話給服務器，如果它不是？如何從商店或服務器獲取React Flux中的數據？

我看到這個提到在this article底部，從Facebook引用伊恩Obermiller，但我找不到它有交談的服務器時所請求的數據從緩存缺少邏輯一家商店的例子。

我想在一個項目上實現這種方法，但我的團隊說它打破了Flux模式。有沒有人有經驗向商店添加提取邏輯並僅將操作用於寫入？

來源

2015-12-21 Nelu

當我在過去完成這項工作時，模式通常會像下面的代碼一樣。以下是關於該代碼的一些注意事項：

getDataFromAPI()顯然是一個HTTP請求或類似的東西，它會返回一個承諾，該承諾將根據您在存儲中需要的數據進行解析。當然，你可以用回調來做到這一點。

storeDataInStore()是對調度程序的調用，該調度程序處理將數據存入商店。

的組件監聽在商店的變化，所以當你打電話getDataFromAPI()和storeDataInStore()先後，該組件將聽到店裏的變化，調用handleStoreDataChange()方法，並適當地重新渲染。

import LoadingComponent from './LoadingComponent'; 

import Store from '../../stores/ThatStore'; 
import { getDataFromAPI } from '../../utils/WebUtils'; 
import { storeDataInStore } from '../../utils/AppUtils'; 

class ThisComponent extends React.Component { 
    constructor() { 
    super(props); 
    } 

    componentWillMount() { 
    let dataFromStore = Store.getDataFromStore(); 
    if (/* condition indicating data is in store */) { 
     this.setState(dataFromStore); 
    } else if (/* condition indicating data is not in store */) { 
     getDataFromAPI().then((data) => { 
     storeDataInStore(data); 
     }); 
    } 
    } 

    componentDidMount() { 
    this.handleStoreDataChange = this.handleStoreDataChange.bind(this); 
    Store.addChangeListener(this.handleStoreDataChange); 
    } 

    componentWillUnmount() { 
    Store.removeChangeListener(this.handleStoreDataChange); 
    } 

    handleStoreDataChange() { 
    this.setState(Object.assign(Store.getDataFromStore()); 
    } 

    render() { 
    if (/* condition indicating that you are awaiting data */) return <LoadingComponent />; 
    return (
     /* All of the things you would render if the data is loaded in the store */ 
    ); 
    } 
}

來源

2015-12-23 13:55:13 Brandon

如何從商店或服務器獲取React Flux中的數據？

回答

相關問題