0

我想在渲染组件之前调度一个动作。但是该动作是与 redux-saga 集成的异步动作。

我必须知道异步操作何时完成，如果完成，则渲染组件。为了完成这项工作，我为每个容器设置了一个唯一的 ID，并且在操作完成后，属性 { loaded: true } 将被保存到存储中。

我正在考虑这种方式

@preload('uniqueId', (dispatch) => new Promise((resolve, reject) => {
  dispatch(MyAction(resolve, reject));
})
@connect(....)
class MyComponent extends React.Component {
  ....
}

@preloadcomponenWillMount是一个函数在（对于服务器端）或（对于客户端）触发指定的动作componenDidMount，当动作调用时resolve()，state.preloadState.uniqueId.loaded将设置为true。它还包装组件，以便仅在state.preloadState.uniqueId.loaded === true.

@connect在指定的操作中将我想要预加载的数据连接到 redux 存储中。

我想知道为 redux、redux-saga 应用程序和服务器端渲染进行数据预加载是否是常见的做法（我之前使用过 redux-async-connect，但我想让所有嵌套组件都能够进行数据预加载所以我绑定到 componentWillMount 而不是一些静态函数）。

4

1 回答 1

1

是的，您不能真正阻止组件渲染（没有其父级根本不渲染它），但您可以有条件地不渲染任何内容。就像是：

render() {
  if (!state.data) { return null; }
  return <div>{state.data}</div>
}
于 2016-07-29T16:18:06.237 回答