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的const。

然后检查promises，使用renderToString（）创建静态页面，并在序列化后使用Template（）函数发送数据。

但是，我在窗口变量中收到的所有内容都是我在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...承诺需要返回到redux，因此添加缺少的return应该会修复它。即return axios.get(config.api.baseUrl+'/experiences/rows?order[start_date]=DESC')

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

1 个答案: