我如何在服务器端渲染之前向我的商店发送一个动作？ - 终极版

Question

我有一个正在服务器端渲染的应用程序。这是服务器端代码：

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

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

我如何在服务器端渲染之前向我的商店发送一个动作？ - 终极版

How can I dispatch an action to my store before I server side render? - Redux

redux

server-side-rendering