Question

我正在使用react-redux和react-router的反应，我正在尝试在我的组件中定义一个静态方法，用于从服务器获取该组件的必要数据。这些操作是异步的，我使用了redux-thunk中间件。单独调用这些操作可以正常工作，但我不想手动定义何时需要调用哪些操作，而是希望只是循环访问服务器上的组件并根据需要调用静态方法。

我尝试使用这样的东西来遍历所有组件，但我无法让它工作。我怀疑是因为我的组件是嵌套的。

  return Promise.all(
    components
      .reduce((previous, current) => {
        return (current && current.fetchData || [])
          .concat((current && current.WrappedComponent ? current.WrappedComponent.fetchData : []) || [])
          .concat(previous);
      }, [])
      .map(fetchData => dispatch(fetchData(params)))
  );

其他可能存在潜在问题的是我的一些路线会渲染出多个这样的组件：

<Route
  components={{ foo: Foo, bar: Bar }}
/>

我应该怎么做呢？谢谢！

Answer 1

看看Redux-Connect（这是原始redux-async-connect的维护分支）。

这里的不同之处在于，不是使用静态方法，而是包装组件并定义从内部获取数据的promise。它以这种方式很好，因为它将获取数据的责任转移到组件本身之外。

特别是您所关注的内容，请参阅loadOnServer功能。它遍历您要渲染的所有组件，查找相关的HOC并运行它们。理想情况下，您的redux商店现在看起来正是您希望它第一次正确呈现的方式。然后，您可以继续回调中的渲染。

Answer 2

我认为您正在寻找类似https://facebook.github.io/relay/

的内容

如果您不能使用它，您可以在服务器端商店上发送必要的操作。如果您的组件需要大量数据，您显然不希望这样做......

一个选项是在服务器端定义一个fetchInitialData()函数，用于调度所有操作。

另一方面，您应该将要在服务器端获取的数据量保持在较低水平。您可能会失去从服务器端渲染中获得的渲染速度，因为如果没有所有数据，则无法渲染。

获取数据并在服务器上填充redux store

2 个答案: