在同构app上对路由器redux初始状态设置做出反应

Question

我正在编写一个带有react，redux，react-router，react-router-redux的同构应用程序。 我在client.js上调用syncHistoryWithStore。但是在初始加载时，router.locationBeforeTransitions始终为空。一旦我浏览它就会填充。

const history = syncHistoryWithStore(browserHistory, store);
...

<Router routes={routes} history={history} />

以上代码来自client.js

我是否应该手动在服务器端激活LOCATION_CHANGE操作以填充react-router-redux的初始状态？

Answer 1

您将在客户端上创建新商店，因此在服务器上创建的商店中的状态将丢失。我们需要将初始状态从服务器传递到客户端，以便它可以填充其存储。

服务器上的

：

const initialState = store.getState();

现在将此添加到从服务器呈现的HTML模板中：

<script type="application/javascript">
  window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
</script>

客户上的

：

let initialState = window.__INITIAL_STATE__;

在客户端createStore时使用initialState。