Question

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

我必须知道异步操作何时完成，如果完成，则渲染组件。为了使这项工作，每个容器都有一个唯一的id，在完成操作后，属性{loaded：true}将被保存到商店中。

我在考虑这种方式

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

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

时呈现组件

state.preloadState.uniqueId.loaded === true在预定的操作中将我想要预装的数据连接到redux store。

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

Answer 1

是的，你无法真正阻止某个组件进行渲染（不让其父级只是不渲染它），但你可以有条件地渲染任何内容。类似的东西：

render() {
  if (!state.data) { return null; }
  return <div>{state.data}</div>
}

Redux在渲染之前发送

1 个答案: