Question

我很难用React / Redux预加载状态。

在将此标记为重复之前，我已经阅读过这些内容：

这是我的情景：

我使用的是Node + React + Redux。
当我从服务器加载页面时，我从数据库加载User对象。我需要此User对象处于状态，而无需往服务器的往返。
由于User对象是动态的，我无法在捆绑中使用它。
我不使用服务器呈现。

我的问题：

如何将用户对象从服务器初始加载到客户端的商店中？

在this answer中，丹·阿布拉莫夫说：

在客户端上，您将从全局变量中读取它，并使用它创建客户端存储实例。换句话说，您永远不必手动创建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);

以上可能有效，问题是我不相信这实际上是一种好习惯，因为我没有找到任何关于它的例子在互联网上。

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

Answer 1

直接来自redux recipes page：

要传递状态，我们会添加一个标记，将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>
    `
}

Answer 2

当我从服务器加载页面时，我从数据库加载User对象。我需要这个User对象处于没有往返服务器的状态。

如果您不是服务器渲染，我认为您应该首先到服务器进行一次往返。我看到它的方式是你必须至少两次调用服务器：一个用于可缓存的bundle，另一个用于数据。即使您正在加载一个脚本，该脚本将设置一个具有某种初始状态的全局变量，您仍然需要再次调用才能使该捆绑包正确吗？我可能会误解，但我没有看到以你描述的方式设置初始状态的优势。如果您不是服务器渲染，那么可能是简单的REST和SPA更简单。

如何将User对象从服务器初始加载到客户端的商店中？

我的建议是让第一次往返服务器并等待获取承诺解析，然后创建商店并呈现应用程序。

Sub Copy_2016()
'
'Run Sub Copy_2016()
'
Sheets("Working - 2016").Select
Range("A3:AO6304").ClearContents

For Each Cell In Sheets("Working - Data").Range("A1:A6304,C3:C6304")
    If Cell.Value = "2016" And If Not Cell.Value = "HI" Then
         matchRow = Cell.Row
         Rows(matchRow & ":" & matchRow).Select
         Selection.Copy

         Sheets("Working - 2016").Select
         ActiveSheet.Rows(matchRow).Select
         ActiveSheet.Paste
         Sheets("Working - Data").Select
    End If
Next

End Sub

同样，我可能会误解你的问题/架构，但这只是我的两分钱。祝你好运！

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

2 个答案: