在服务器端渲染之前,如何将操作发送到我的商店? - Redux

时间:2017-05-20 13:52:42

标签: redux serverside-rendering

我有一个应用程序,我是服务器端渲染。这是服务器端代码:

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添加内容?

1 个答案:

答案 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")操作分派到该请求中唯一的商店实例。