ネットワークインジケータの可視性をReduxで設定する場所は？

Question

APIからデータを取得するアプリケーションにいくつかのアクションがあります。私は、アクションがフェッチされている場合、私のreduxストアに "ローディング"属性を設定しています。今、私はアプリケーションがデータを取得しているネットワークインジケータを表示したいと思います。

これはそれを行う方法ではないことを、私は迅速&汚い解決策を見つけたが、私は確信しています：

import React, { Component } from 'react'; 
import { AppRegistry, StatusBar } from 'react-native'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import thunk from 'redux-thunk'; 
import reducer from './app/reducers'; 

import App from './app/providers/App'; 

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore); 
const store = createStoreWithMiddleware(reducer); 

class AppName extends Component { 
    render() { 

     store.subscribe(() => { 
      if( 
       store.getState().dishes.loading 
       || store.getState().deals.loading 
      ) StatusBar.setNetworkActivityIndicatorVisible(true); 
      else StatusBar.setNetworkActivityIndicatorVisible(false); 
     }); 


     return (
      <Provider store={store}> 
       <App /> 
      </Provider> 
     ); 
    } 
} 

AppRegistry.registerComponent('AppName',() => AppName); 

なリスナーをフックするための正しい方法は何ですか？

Answer 1

StatusBar.setNetworkActivityIndicatorVisibleを何度も呼び出さないようにするには、接続されたコンポーネントでcomponentWillReceivePropsを使用して、状態の変更を見ることができます。

import AppContainer from './containers/AppContainer'; 

class AppName extends Component { 
    render() {   
     return (
      <Provider store={store}> 
       <AppContainer /> 
      </Provider> 
     ); 
    } 
} 

コンテナ/ AppContainer.js

import App from '../components/App.js'; 

const mapStateToProps = state => ({ 
    loading: state.dishes.loading || state.deals.loading 
}); 

export default connect(mapStateToProps)(App); 

コンポーネント/ App.js

class App extends Component { 

    componentWillReceiveProps(nextProps) { 
    if (!this.props.loading && nextProps.loading) { 
     // Changing from `not loading` to `loading` 
     StatusBar.setNetworkActivityIndicatorVisible(true); 
    } else if (this.props.loading && !nextProps.loading) { 
     // Changing from `loading` to `not loading` 
     StatusBar.setNetworkActivityIndicatorVisible(false); 
    } 
    } 

    // ... 
}