我有一个应用程序,我是服务器端渲染。这是服务器端代码:
export default (req, res, next) => {
const store = getStore();
// HERE IS THE DISPATCH
getStore().dispatch(updateToken("TOKEN"));
match({ routes, location: req.url }, (err, redirect, props) => {
if (err) {
return next(err);
} else if (redirect) {
res.redirect(redirect.pathname + redirect.search)
} else if (props) {
resolveAsyncDeps(store, props)
.then(() => {
//HERE IS INITIAL STATE
const initialState = store.getState();
const content = renderToString(
<Provider store={store}>
<RouterContext {...props} />
</Provider>
);
res.send(
minify(
docTemplate({
...(Helmet.rewind()),
content,
initialState,
env: { DASHBOARD_REST_API, DASHBOARD_WS_API }
}),
{ collapseWhitespace: true, removeAttributeQuotes: false }
)
);
}).catch(next);
} else {
res.status(404).send('Not Found')
}
})
}
我的行动是同步的:
export function updateToken(token) {
return {
type: UPDATE_TOKEN,
payload: {
token
}
};
}
但当getState()
上的store
传递给initialState
时,我的token
不在状态树中。我认为dispatch
是同步的,除非我使用thunk
或其他类型的中间件?我错过了什么?在推到前端之前,如何向initialState
添加内容?
答案 0 :(得分:1)
在这种特殊情况下,我认为getStore
是一个工厂函数 - 一个工厂函数,它调用Redux的createStore
但是具有特定于应用程序的配置。
在服务器上,除非您想要所有用户和要共享同一个商店实例,必须在每个请求上创建一个新的商店实例。
查看您的代码段:
const store = getStore();
// HERE IS THE DISPATCH
getStore().dispatch(updateToken("TOKEN"));
看起来您已经为每个请求创建了两个商店实例,并且正在将updateToken("TOKEN")
操作分派到错误的商店实例中。
相反,您可能希望执行以下操作:
const store = getStore();
// HERE IS THE DISPATCH
store.dispatch(updateToken("TOKEN"));
这会将updateToken("TOKEN")
操作分派到该请求中唯一的商店实例。