Fatal编程技术网
  • javascript/
  • Javascript 使用React/Redux，如何动态预加载状态？

Javascript 使用React/Redux，如何动态预加载状态？

javascript reactjs redux

Javascript 使用React/Redux，如何动态预加载状态？,javascript,reactjs,redux,Javascript,Reactjs,Redux,我在React/Redux的预加载状态下遇到了困难 在将其标记为副本之前，我已经阅读了以下内容： 以下是我的设想： 我正在使用Node+React+Redux 当我从服务器加载页面时，我从数据库加载User对象。我需要此用户对象处于状态，而不需要往返服务器 因为User对象是动态的，所以我不能将它放在捆绑包中 我不使用服务器渲染 我的问题是： 最初如何将用户对象从服务器加载到客户端的存储中？ 在本书中，丹·阿布拉莫夫说： 在客户机上，您可以从全局变量中读取它，并使用它创建客户机存储

我在React/Redux的预加载状态下遇到了困难

在将其标记为副本之前，我已经阅读了以下内容：

以下是我的设想：

  • 我正在使用Node+React+Redux
  • 当我从服务器加载页面时，我从数据库加载
    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);

//这里是window.\u initialState.user正在标记中发送到客户端。
const store=createStore（还原程序，{user:window.\u initialState.user）；
上面的可能有效，问题是我没有信心这实际上是一个好的实践，因为我在互联网上没有找到任何关于它的例子

那么，这是正确的做法吗？有没有更好/更推荐的方法

当我从服务器加载页面时，我从数据库加载用户对象。我需要此用户对象处于不往返于服务器的状态

我认为，如果您不进行服务器渲染，则应该进行到服务器的初始往返。在我看来，您必须至少对服务器进行两次调用：一次调用可缓存捆绑包，另一次调用数据。即使您加载的脚本将设置具有某些初始状态的全局变量，也必须进行另一个调用来获得正确的捆绑包？我可能有误解，但我不认为以您描述的方式设置初始状态有什么好处。如果您不是服务器渲染，那么普通的ole restful 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')
    )
});

fetch（'http://example.com/something）。然后（data=>data.json（））。然后（initalState=>{
渲染(
,
document.getElementById（'app'）
)
});
同样，我可能误解了您的问题/架构，但这只是我的两分钱。祝您好运！

这是直接从：

为了传递状态，我们添加了一个标记，该标记将预加载状态附加到
窗口


函数renderFullPage（html，preload状态）{
返回`
Redux通用示例
${html}
//警告：有关在HTML中嵌入JSON的安全问题，请参见以下内容：
// http://redux.js.org/docs/recipes/ServerRendering.html#security-考虑

window.\uuuu预加载的\u状态\uuuuu=${JSON.stringify（preforedstate）。替换（/FWIW，这是我们公司的标准做法，我们已经编写了一系列redux应用程序。我们也会进行服务器端渲染，并通过服务器端存储实例生成该状态，但即使没有服务器端存储实例，它也可以工作。这是一个很好的示例@RicoKahler，谢谢。它就在那里，我没有看到。如果你想添加答案，我会接受它。否则我会用你的评论来回答我自己的问题。你的评论正是我想要的。把它作为一个答案，我会接受的。

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>
    `
}