3

私はreact-routerを使用しており、URLでIDを取得するコンポーネントに移動し、このIDを使用してアクションを使用してサーバーからデータを取得する必要があります。

現時点では、componentWillMountフックでアクション クリエーターを呼び出しています。

これは今のところ機能しますが、問題が発生します。render メソッドでは、myData実際にレンダリングする前に、そのすべての属性が実際に存在するかどうかを確認する必要があります。

@connect(state => {myData: state.etc.myData})
export default class extends React.Component {

  componentWillMount = () => {
    this.props.dispatch(
      ActionCreators.getData(this.props.params.id)
    )
  }

  render() {
    if (this.props.myData.hasNotLoaded) return <br/>
    ...
  }

}

手動チェックなしでレンダリングする前にストアにデータを取得する別の方法はありますか?

4

2 に答える 2

9

どこからでもルーターのonEnterフックとディスパッチ アクションをサブスクライブできます。

const store = configureStore()
const routing = (<Router>
    <IndexRoute onEnter={()=>store.dispatch(myLoadDataActionCreator())}/>
</Router>)

したがってsetState、以前の回答を回避し、コンポーネントをreduxと結び付けないでください。

于 2015-10-05T16:39:01.293 に答える
1

たとえば、次のようにコールバックを作成する必要があります。

_onChange() {
    this.setState(myStore.getData());
}

次に、次の反応関数で次のことを行います。

componentDidMount() {
    myStore.addChangeListener(this._onChange);
},
componentWillUnmount() {
    myStore.removeChangeListener(this._onChange);
}

反応ルーターにミックスインを使用していると思いますが、そうでない場合は、そのドキュメントを見てください。見る価値のある便利な機能がいくつかあります。

ifメソッドでそのロジックが必要になるとは思わないrender().reactは仮想DOM管理でそれを処理し、いつそれとデータをロードするかを知っている.

于 2015-08-03T14:33:33.113 に答える