Reactjs SSR与redux存储的数据进行反应

在不触发API（

分派（操作）

）的情况下，如何使用已获取的数据填充存储（服务器端）

步骤如下：

客户通过链接进入网站

/users

在服务器上，我获取

/users

并将其传递给

静态路由器

在这一步中，文档告诉我，我需要递归地分派所有组件（特定于此路由）中的所有操作（aka function

loadData

），并将获取的数据存储在redux存储中

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

---

提前感谢您的帮助。

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

然后，客户端将读取状态并对redux存储进行再水化。以下是未经测试的示例：

服务器端

/。。。
//从某地进口东西
// ...
//随时可用的用户数据
const users=[{u id:1000，“name”：“John Doe”}，{u id:2000，“name”：“Jane Brown”}]；
app.get（'/users'，（req，res）=>{
const context={}；
//手动构造redux状态
const state={users:users}；
//使用现有状态创建redux存储
const store=createStore(
stringify（state）
);
const reactDomString=renderToString(
);
res.end(`
${reactDomString}
window.REDUX_DATA=${JSON.stringify（state）}
`);
});

客户端

/。。。
//从某地进口东西
// ...
//从SSR模板中提取数据
const store=createStore（window.REDUX_数据）；
const-appContainer=document.getElementById（“应用”）；
水合物(
, 
appContainer
);

感谢您的快速回复，这是我一直在寻找的！我明白了。谢谢

// ...
// 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
);