Reactjs 在何处使用Redux设置网络指示器的可见性？

在我的应用程序中，我有几个从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);

挂接此类侦听器的正确方法是什么？

为了避免调用StatusBar.SetNetworkActivityIndicator Visible太多次，您可以在连接的组件中使用componentWillReceiveProps查看状态的更改

import AppContainer from './containers/AppContainer';

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

组件/App.js

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

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

export default connect(mapStateToProps)(App);

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);
     }
   }

   // ...
}