提取數據並在服務器上填充redux存儲

我正在使用與react-redux和react-router進行反應，我試圖在我的組件中定義一個靜態方法，用於從該組件獲取該組件的必要數據服務器。這些動作是異步的，我使用了redux-thunk中間件。單獨調用這些操作可以正常工作，但我不希望手動定義何時需要調用哪些操作，而是隻想循環訪問服務器上的組件，並根據需要調用靜態方法。提取數據並在服務器上填充redux存儲

我嘗試過使用這樣的東西來遍歷所有的組件，但我無法讓它工作。我懷疑這是因爲我的組件是嵌套的。

return Promise.all(
    components 
     .reduce((previous, current) => { 
     return (current && current.fetchData || []) 
      .concat((current && current.WrappedComponent ? current.WrappedComponent.fetchData : []) || []) 
      .concat(previous); 
     }, []) 
     .map(fetchData => dispatch(fetchData(params))) 
);

別的東西，可能是一個潛在的問題是，我的一些路線的渲染多個組件是這樣的：

<Route 
    components={{ foo: Foo, bar: Bar }} 
/>

我應該如何去這樣做呢？謝謝！

來源

2016-07-16 Firas Dib

我認爲你正在尋找像https://facebook.github.io/relay/ – Scarysize

-1

我認爲你正在尋找的東西像https://facebook.github.io/relay/

如果不能使用，你可以只派遣你的服務器端存儲中的必要行動。如果你的組件需要大量的數據，你顯然不想這麼做......

一個選項是在服務器端定義fetchInitialData()函數，該函數調度所有的動作。

另一方面，您應該保持在服務器端的數據量低。您可能會失去從服務器端渲染中獲得的渲染速度，因爲如果沒有所有數據，反應無法渲染。

來源

2016-07-16 20:04:07 Scarysize

這聽起來不對。我不想使用接力，我不相信它是我想要做的事。其次，我不想定義每個組件在服務器上需要的數據。當用戶訪問'/ foo'時，他們可能需要根本不同於他們訪問'/ bar'的數據，反之亦然。總是聽到它們，聽起來很糟糕。 –

您是否在使用express/node.js服務器？您可以定義一箇中間件（不是在這裏討論redux中間件）來爲特定的路由執行數據獲取。或者只是在你的（serverside）路由器上做。 – Scarysize

看看Redux-Connect（這是原始的redux異步連接的維護叉）。

這裏的區別在於，不是使用靜態方法，而是包裝組件並定義從那裏取回數據的承諾。這樣做很好，因爲它將獲取數據的責任轉移到組件本身之外。

對於您特別要求的內容，請參閱loadOnServer函數。它貫穿你打算渲染的所有組件，找到相關的HOC並運行它們。理想情況下，您的Redux商店現在正在按照您希望第一次正確渲染的方式進行查看。然後，您可以在回調中繼續渲染。

來源

2016-07-17 12:02:34 horyd

提取數據並在服務器上填充redux存儲

回答

相關問題