SSR 与 redux 存储的数据反应

Question

在不触发 API（ dispatch(action) ）的情况下，用已经获取的数据填充存储（在服务器端）有多大可能？

步骤：

1. 客户通过链接/users访问网站
2. 在服务器上，我使用/users并将其传递给StaticRouter
3. 在这一步，文档告诉我，我需要递归地调度所有组件（特定于此路由）中的所有操作（又名函数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
);