Redux 异步 SSR：获取数据后清空存储

Question

我试图在使用 React、Redux（w/thunk）和 Axiom 将 HTML 发送到服务器上的浏览器之前分派一个操作来填充商店。

server.jsx

/* ... */

const currentRoutes = routes.filter(route => matchPath(req.url, route));

const promises = currentRoutes.map((route) => {
  let fetchData = route.component.fetchData;
  return fetchData instanceof Function ? fetchData(store) : Promise.resolve(null)
});

// Check promises
Promise.all(promises)
  .then(response => {

    const context = {};

    const markup = renderToString(
      <Provider store={store}>
        <StaticRouter location={req.url} context={context}>
          <App />
        </StaticRouter>
      </Provider>
    )

    const stylesheet = renderToString(
      <link rel="stylesheet" href="/static/styles.css" />
    );

    const helmet = Helmet.renderStatic();

    res.status(200).send(Template({
      markup: markup,
      helmet: helmet,
      initialData: serialize(store.getState()),
      stylesheet: (process.env.NODE_ENV == 'development') ? '' : stylesheet
    }))
  })
  .catch(err => {
    console.log('error', err);
  })

/* ... */

在我的server.jsx中，我正在寻找匹配的路线

然后我在路由组件静态 fetchData 函数中调度。我正在将结果映射到一个名为 promises 的常量中。

然后我检查承诺，使用 renderToString() 创建静态页面并在序列化后使用我的 Template() 函数发送数据。

但是，我在我的 window 变量中收到的所有信息都是我从 reducer 获得的初始状态：

<script>
   window.__PROPS__ = {"experiences":{"fetching":true,"fetched":false,"all":[]}}
</script>

相关代码位如下：

行动

const fetchExperiences = () => {
  return function(dispatch) {
    dispatch({ type: "FETCH_EXPERIENCES_START" });

    axios.get(config.api.baseUrl+'/experiences/rows?order[start_date]=DESC')
      .then((response) => {
        let data = response.data && response.data.data;
            dispatch({ type: "FETCH_EXPERIENCES_FULFILLED", payload: data })
        })
      .catch(err => {
        dispatch({ type: "FETCH_EXPERIENCES_REJECTED", payload: err })
      })
  }
}

组件

class Home extends React.Component {

    static fetchData (store) {
        return store.dispatch(fetchExperiences());
    }

    /* ... */

}

期待您的回答 - 在此先感谢您！

Answer 1

在 fetchExperiences 函数中，axios.get(config.api... promise 需要返回到 redux，因此添加缺少的 return 应该可以修复它。即 return axios.get(config.api.baseUrl+'/experiences/rows?order[start_date]=DESC')

Redux 异步 SSR：获取数据后清空存储

Redux async SSR: Empty store after fetching data

asynchronous

reactjs

redux

server-side-rendering