データフェッチ中にステータスを表示するコンポーネントの状態を更新します。

Question

アプリケーションでステータス取得コンポーネントを作成しようとしていますが、データフェッチやその他のネットワーク関連イベント中に更新されます。ここで私は（原因の依存関係に）ストア内のデータの別のセットに基づいていくつかのデータをロードするためにcomponentWillReceivePropsライフサイクルイベントを使用しています

componentWillReceiveProps(nextProps){ 
// This check is required otherwise setting state 
// from here will end up in a rendering loop 
if(!_.isEqual(this.props, nextProps)){ 
    if(nextProps.services.length != 0){ 
    if(nextProps.filters.length == 0){ 
     nextProps.setStatus('Fetching filters...'); 
     const { serviceId } = nextProps.params; 
     const serviceIndex = nextProps 
          .services 
          .findIndex(
           (service) => service.id == serviceId 
          ); 
     const serviceObj = nextProps.services[serviceIndex]; 
     nextProps.getFilters(serviceObj); 
    } 
    } 
}  

} 。 setStatusメソッドは、ストアを新しいステータスメッセージで更新する役割を担い、ステータスコンポーネントが更新されるようにします。ここでは、フィルタが空であるかどうかを確認しています。ステータスを設定してデータを取得しようとしています。ステータスを設定しているときに、ストアを更新しているので、「レンダリング」プロセスが再開されます。これにより、ライフサイクルイベントが再度呼び出され、フィルタがまだ空であるため、データフェッチ要求が再度実行されます。現在、私はこれを停止しました

// Setting status will set the state and invoke data collection 
     // again as filters are still empty due to re-render 
     if(_.isEqual(this.props.status,nextProps.status) && 
     _.isEqual(this.props.filters,nextProps.filters)) { 
     const { serviceId } = nextProps.params; 
     const serviceIndex = nextProps 
           .services 
           .findIndex(
            (service) => service.id == serviceId 
           ); 
     const serviceObj = nextProps.services[serviceIndex]; 
     nextProps.getFilters(serviceObj); 
     } 

しかし、このアプローチはハックに似ています。このステータスコンポーネントのより良い設計アプローチをお勧めしますか？規制対象のコンポーネントを保守することはできますか？

Answer 1

あなたが具体的に達成しようとしていることは私には不明な点ですが、Reduxイベントを作成してこのプロセスのさまざまなステップを知らせるべきだと思いますそれに応えてアクションクリエーターを打つ。あなたがReduxストア以外の何らかの方法で状態を追跡しようとすると、あなた自身が困ってしまうでしょう。