Как получить данные в React Flux из магазина или сервера?

Question

Каков наилучший шаблон для вызова хранилища Flux для некоторых данных и получить его, если он есть или вызвать сервер, если он не?

Я вижу это в нижней части this article, цитируя Яна Обермиллера из Facebook, но я не могу найти пример магазина, у которого есть логика, чтобы поговорить с сервером, когда запрашиваемые данные отсутствуют в его кеше.

Я хочу реализовать этот подход в проекте, но моя команда говорит, что он разбивает шаблон потока. Кто-нибудь имеет опыт добавления логики выборки в магазины и использования действий только для записи?

Answer 1

Когда я делал это в прошлом, шаблон обычно прошел нечто вроде кода ниже. Вот несколько примечаний к этому коду:

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 */ 
    ); 
    } 
}