Bir React Redux uygulamasında ilk verileri sunucudan nereden alırım?

Question

React/Redux'u öğrenmeye başladım ve muhtemelen çok basit bir soru olan bir şeye tökezledim. Aşağıda, sadeleştirme uğruna kaldırılmış bazı kodlarla uygulamamın snippet'leri var.

Durumum, varsayılan olarak boş olan bir siteler dizisi tarafından açıklanmaktadır. Daha sonra indirici, kullanıcı farklı bir sayfaya paginat oluşturduğunda farklı bir site kümesini yüklemek için LOAD_SITES eylemine sahip olacak ancak şimdilik hiçbir şey yapmıyor. Tepki, PublishedSitesPage'u oluşturarak başlar, daha sonra PublishedSitesBox'u oluşturur, bu daha sonra veriler üzerinde döngü yapar ve tek tek siteler oluşturur.

Yapmak istediğim, her şeyi varsayılan boş diziyle oluşturması ve bu arada "sunucudan yükleme siteleri" sözünü başlatması ve bir kez çözüldüğünde LOAD_SITES eylemini göndermesidir. Bu çağrıyı yapmanın en iyi yolu nedir? PublishedSitesBox ya da belki de componentDidMount'un kurucusunu düşünüyordum. Ancak bunun işe yarayıp yaramayacağından emin değilim - kaygılarım yeniden şekillendirmeye devam edecek sonsuz bir döngü oluşturacağım. Sanırım bu sonsuz döngüyü bir şekilde "haveRequestedInitialData" satırları boyunca başka bir devlet paramiti ile önleyebilirim. Yaptığım bir diğer fikir ise, bu sözü ReactDOM.render() yaptıktan sonra yapmak. Bunu yapmanın en iyi ve en temiz yolu nedir?

export default function sites(state = [], action) { 
    switch (action.type) { 
    default: 
     return state; 
    } 
} 
... 

const publishedSitesPageReducer = combineReducers({ 
    sites 
}); 

ReactDOM.render(
    <Provider store={createStore(publishedSitesPageReducer)}> 
    <PublishedSitesPage /> 
    </Provider>, 
    this.$view.find('.js-published-sites-result-target')[0] 
); 

... 

export default function PublishedSitesPage() { 
    return (
    <PublishedSitesBox/> 
); 
} 

... 

function mapStateToProps(state) { 
    return { sites: state.sites }; 
} 

const PublishedSitesBox = connect(mapStateToProps)(({sites}) => { 
    // render sites 
}); 

Answer 1

Bu veri yükleme mantığının React bileşenlerine hiç dokunmaması için bir neden yoktur. Burada istediğiniz şey, indirgeyicilere bir eylem gönderme vaadinin iadesidir, bu da mağazada uygun değişiklikleri yapar ve bu da React bileşenlerinin uygun şekilde yeniden oluşturulmasına neden olur.

(eğer ReactDOM.render aramadan önce veya sonra Size zaman uyumsuz çağrı başlaması farketmez; vaadi her iki şekilde çalışır) böyle

şey: Sizin Tepki

var store = createStore(publishedSitesPageReducer); 

someAsyncCall().then(function(response) { 
    store.dispatch(someActionCreator(response)); 
}); 

ReactDOM.render(
    <Provider store={store}> 
    <PublishedSitesPage /> 
    </Provider>, 
    this.$view.find('.js-published-sites-result-target')[0] 
); 

bileşenler mağazanızın tüketicileridir, ancak mağazanızın SADECE tüketicileri olmaları için bir kural yoktur.

Answer 2

bunu nasıl burada açık bir örnek vardır: sonsuz döngü, sizin dizisi artık boş olduğunda, Clear Aralığı gelince Facebook Tutorial

. Bu, çevrimi önlemelidir.