Wstępne ReactJS ładowanie danych

Question

chciałbym wykonać pewne wstępne ładowanie danych, gdy moja pierwsza trasa jest renderowany (na przykład, chcę, aby załadować listę artykułów)

zrobiłem komponent o nazwie News.js który renderuje artykuły. Problem występujący w modelu FLUX polega na tym, gdzie załadować te początkowe dane.

Usługa, którą wykonałem w celu załadowania danych, jest następująca: żądanie importu od "superagenta";

class NewsService { 

    fetchArticles(callback) { 
    request 
     .get('http://localhost/articles') 
     .accept('json') 
     .end(function(err, res){ 
     console.log(err); 
     var result = JSON.parse(res.text); 
     callback(result); 
     }) 
    } 

} 

export default new NewsService(); 

Ta usługa musi zostać wywołana gdzieś. Zgodnie z dokumentacją ReactJS chciałbym wykonać tę operację tak:

export default class News extends React.Component { 

    constructor() { 
    super(); 
    this.state = { 
     _articles: [] 
    } 
    } 

    componentDidMount() { 
    NewsService.fetchProjects(function(articles){ 
     // load articles in the state 
     this.setState({_articles: _articles}) 
    }); 
    } 

    render() { 

     return (
      <section> 
       <h1>Articles</h1> 
       <ul> 
       {this.state.articles.map((article) => { 
        <li>{article.title}</li> 
       })} 
       </ul> 
      </section> 
    ) 
    } 
} 

Teraz moje pytanie jest, czy nie jest to sprzeczne z zasadą strumienia? Czy dane nie powinny być wywoływane jako Akcja, która przechowuje dane w sklepie takim jak Magazyn Google?

Jeżeli działanie będzie jak następuje:

var NewsActions = { 

    load: function() { 
    NewsService.fetchProjects(function(articles){ 
     // store the articles in the NewsStore and dispatch afterwards   
    }); 
    }, 

    create: function(project) { 
    AppDispatcher.dispatch({ 
     actionType: NewsConstants.ARTICLE_CREATE, 
     project: project 
    }); 
    }, 

    update: function(id, project) { 
    AppDispatcher.dispatch({ 
     actionType: NewsConstants.ARTICLE_UPDATE, 
     id: id, 
     project: project 
    }) 
    }, 

    destroy: function() { 
    AppDispatcher.dispatch({ 
     actionType: NewsConstants.ARTICLE_DESTROY, 
     id: id 
    }) 
    } 
}; 

export default NewsActions; 

W Chat-app example z reactjs stanowią one przykład wywołania API. Jednak to wywołanie API jest wywoływane podczas uruchamiania aplikacji (w app.js), co nie ma zastosowania w moim scenariuszu, ponieważ chciałbym używać routingu. Czy wtedy załadowałbym dane do routera? (Używam routera reagowania-)

Wszelkie uwagi dotyczące tej materii lub ulepszeń tego kodu jest bardziej niż mile widziane.

Answer 1

EDIT

nie jest to sprzeczne z zasadą strumienia?

Może tak, może nie. Wygląda na to, że Flux jest dość elastyczny. Z tego co rozumiem, jest to raczej szkielet zasad, a nie ścisły "protokół". Trudno powiedzieć, ale wygląda na to, że oba podane przykłady zadziałają. Tak jak powiedziałeś, według the docs, oni polecają pobierania danych w componentDidMount:

componentDidMount: function() { 
    $.get(this.props.source, function(result) { 
    // ... 

Jednak w swoim przykładzie, jesteś po prostu przesuwając że wywołanie API do usługi, które następnie mogą wchodzić w interakcję ze sklepu/dyspozytora itp., aby można było wykorzystać w całej aplikacji.

Więc co zrobiłeś jest przesuwany piękny kawałek logiki aplikacji, aby zasadniczo własny moduł (dobrze, że moduł jest częścią twoich dyspozytorów). Wygląda na to, że spełni Twoje potrzeby: może być używany w całej aplikacji i może zostać wyciągnięty lub ponownie podłączony zgodnie z Twoim wyobrażeniem. Nie widzę w tym nic złego. Czy może to być niezgodne z jakąś zasadą Flux? Może, może nie. Wątpię, żeby to miało znaczenie.

ORIGINAL

Nie jestem dobrze zorientowany w architekturze Flux, ale patrząc na jednym z przykładów Facebooka w ich GitHub repo (konkretnie Line 24 of TodoMVC):

function getTodoState() { 
    return { 
    allTodos: TodoStore.getAll(), 
    areAllComplete: TodoStore.areAllComplete() 
    }; 
} 

Ich przykład nie pokazuje jak TodoStore wchodzi w interakcję z serwerem, ale wygląda jak na swój początkowy stan, po prostu wysyła zapytanie do todos w sklepie, a następnie do zmian, ich słuchania i emitowania zdarzeń.

Jeśli chodzi o uzyskanie stanu początkowego, wygląda na to, że ich przykład pokazuje zapytanie bezpośrednio do sklepu. Oczywiście od czasu, kiedy zrobili ten przykład i teraz, mogły nastąpić zmiany, ale warto zastanowić się nad kilkoma przykładami w Flux repo, aby dowiedzieć się, jak został zaprojektowany.