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 に答える