Question

如何在不触发API（dispatch(action)）的情况下用已经获取的数据填充（在服务器端）存储区？

步骤：

客户通过链接/users进入网站
在服务器上，我取/users并将其传递给StaticRouter
文档说明，在这一步上，我需要递归调度所有组件（特定于此路由）中的所有操作（即函数loadData），并将获取的数据存储在redux存储中。

但是我已经有了所有必要的数据，并且我不想触发API。

在此先感谢您的帮助。

Answer 1

您可以使用现有数据手动构造应用程序状态，并从该应用程序状态创建redux存储，然后将其通过全局变量传递给客户端。

然后，客户端将读取状态并重新充实redux存储。以下是未经测试的说明：

服务器端

// ...
// import stuff from places
// ...

// Readily available user data
const users = [{ "_id": 1000, "name": "John Doe" }, { "_id": 2000, "name": "Jane Brown" }];

app.get('/users', (req, res) => {

    const context = {};

    // Manually construct the redux state
    const state = { users: users };

    // Create redux store with existing state
    const store = createStore(
        JSON.stringify(state)
    );

    const reactDomString = renderToString(
        <Provider store={store}>
            <StaticRouter context={context} location={req.url}>
                <App />
            </StaticRouter>
        </Provider>
    );

    res.end(`
        <div id="app">${ reactDomString }</div>
        <script>
            window.REDUX_DATA = ${ JSON.stringify(state) }
        </script>
        <script src="./app.js"></script>
    `);
});

客户端

// ...
// import stuff from places
// ...

// Pick up the data from the SSR template
const store = createStore(window.REDUX_DATA);
const appContainer = document.getElementById("app");
ReactDOM.hydrate(
    <ReduxProvider store={store}>
        <Router>
            <Layout />
        </Router>
    </ReduxProvider>, 
    appContainer
);

SSR React与用于Redux存储的数据

1 个答案:

服务器端

客户端