使用React / Redux，如何動態預加載狀態？
[英]With React / Redux, how do I dynamically pre-load state?
問題描述
我在使用React / Redux進行預加載狀態時遇到了困難。
在將其標記為重復之前，我已經閱讀了以下內容：
- http://redux.js.org/docs/recipes/reducers/InitializingState.htm
- Redux-管理預加載狀態
- 在Redux應用中預加載initialState的最佳實踐是什么？
這是我的情況：
- 我正在使用Node + React + Redux。
- 從服務器加載頁面時，從數據庫加載
User對象。 我需要此User對象處於無需往返服務器的狀態 。 - 由於
User對象是動態的，因此無法將其包含在捆綁包中。 - 我沒有使用服務器渲染。
我的問題：
最初如何將用戶對象從服務器加載到客戶端的商店中？
在這個答案中 ，丹·阿布拉莫夫說：
在客戶端上，您將從全局變量中讀取它，並使用它創建客戶端存儲實例。 換句話說，您不必手動創建initialState-您應該使用store.getState（）在服務器上捕獲它，將其傳遞給客戶端，然后使用它創建一個商店。
因此，我假設通過全局變量 ，他的意思是這樣的：
// Here, window._initialState.user is being sent to the client in a <script/> tag.
const store = createStore(reducers, { user: window._initialState.user);
上面的方法可能有用，問題在於我沒有信心這實際上是一個好習慣，因為我沒有在互聯網上找到任何有關它的例子。
那么，這是正確的做法嗎？ 有沒有更好/更推薦的方法？
2 個解決方案
解決方案1
2 已采納 2017-03-30 02:32:34
這直接從redux配方頁面獲取 ：
為了傳遞狀態，我們添加了一個標簽，該標簽將preloadedState附加到
window.__PRELOADED_STATE__。
function renderFullPage(html, preloadedState) {
return `
<!doctype html>
<html>
<head>
<title>Redux Universal Example</title>
</head>
<body>
<div id="root">${html}</div>
<script>
// WARNING: See the following for security issues around embedding JSON in HTML:
// http://redux.js.org/docs/recipes/ServerRendering.html#security-considerations
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
</script>
<script src="/static/bundle.js"></script>
</body>
</html>
`
}
解決方案2
0 2017-03-29 02:23:01
從服務器加載頁面時，從數據庫加載User對象。 我需要此User對象處於無需往返服務器的狀態。
我認為如果您不進行服務器渲染，則應該對服務器進行初始往返。 我的看法是，您必須至少對服務器進行兩次調用：一個調用可緩存的捆綁包，另一個調用數據。 即使您正在加載將全局變量設置為具有某些初始狀態的腳本，您仍然必須再次調用以使包正確嗎？ 我可能會誤會我，但我看不出以您描述的方式設置初始狀態的優勢。 如果您不是服務器渲染，那么也許一個簡單的寧靜API和SPA更簡單。
最初如何將用戶對象從服務器加載到客戶端的商店中？
我的建議是僅使服務器第一次往返並等待獲取承諾解決，然后創建商店並渲染應用程序。
fetch('http://example.com/something').then(data => data.json()).then(initalState => {
render(
<Provider store={/*stored created with initalState*/}>
<App />
</Provider>,
document.getElementById('app')
)
});
同樣，在這里我可能會誤解您的問題/體系結構，但這只是我的兩分錢。 祝好運！
如何預加載樣式表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.