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

Question

我在使用React / Redux进行预加载状态时遇到了困难。

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

这是我的情况：

我正在使用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);

上面的方法可能有用，问题在于我没有信心这实际上是一个好习惯，因为我没有在互联网上找到任何有关它的例子。

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

Answer 1

这直接从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>
    `
}

Answer 2

从服务器加载页面时，从数据库加载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')
    )
});

同样，在这里我可能会误解您的问题/体系结构，但这只是我的两分钱。 祝好运！

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2017-03-30 02:32:34

解决方案2
0 2017-03-29 02:23:01

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2017-03-30 02:32:34

解决方案2 0 2017-03-29 02:23:01

解决方案1
2 已采纳 2017-03-30 02:32:34

解决方案2
0 2017-03-29 02:23:01