我有一个使用 Redux 和 React Router 的通用 React 应用程序。我的一些路由包含参数，这些参数会在客户端触发 AJAX 请求以对数据进行水合以供显示。在服务器上，这些请求可以同步完成，并在第一个请求上呈现。
我遇到的问题是：当在componentWillMount路由组件上调用任何生命周期方法（例如）时，调度将反映在第一次渲染中的 Redux 操作为时已晚。
这是我的服务器端渲染代码的简化视图：
路由.js
export default getRoutes (store) {
return (
<Route path='/' component={App}>
<Route path='foo' component={FooLayout}>
<Route path='view/:id' component={FooViewContainer} />
</Route>
</Route>
)
}
服务器.js
let store = configureStore()
let routes = getRoutes()
let history = createMemoryHistory(req.path)
let location = req.originalUrl
match({ history, routes, location }, (err, redirectLocation, renderProps) => {
if (redirectLocation) {
// redirect
} else if (err) {
// 500
} else if (!renderProps) {
// 404
} else {
let bodyMarkup = ReactDOMServer.renderToString(
<Provider store={store}>
<RouterContext {...renderProps} />
</Provider>)
res.status(200).send('<!DOCTYPE html>' +
ReactDOMServer.renderToStaticMarkup(<Html body={bodyMarkup} />))
}
})
当FooViewContainer组件在服务器上构建时，它的第一次渲染的 props 已经被修复了。我分派到商店的任何操作都不会反映在对 的第一次调用中render()，这意味着它们不会反映在页面请求上传递的内容中。
idReact Router 传递的参数本身对第一次渲染没有用。我需要将该值同步水合到一个合适的对象中。我应该把这个水分放在哪里？
一种解决方案是将它内联放在render()方法中，例如在服务器上调用它。这对我来说显然是不正确的，因为 1）它在语义上没有意义，2）它收集的任何数据都不会正确发送到商店。
我见过的另一个解决方案是向fetchData路由器链中的每个容器组件添加一个静态方法。例如这样的事情：
FooViewContainer.js
class FooViewContainer extends React.Component {
static fetchData (query, params, store, history) {
store.dispatch(hydrateFoo(loadFooByIdSync(params.id)))
}
...
}
服务器.js
let { query, params } = renderProps
renderProps.components.forEach(comp =>
if (comp.WrappedComponent && comp.WrappedComponent.fetchData) {
comp.WrappedComponent.fetchData(query, params, store, history)
}
})
我觉得必须有比这更好的方法。它不仅看起来相当不雅（是.WrappedComponent一个可靠的接口吗？），而且它也不适用于高阶组件。如果任何路由组件类被除此之外的任何东西包裹，都connect()将停止工作。
我在这里错过了什么？