Where to set the visibility of Network Indicator with Redux? - reactjs

Question

I have several actions in my application which fetches data from an API. I am setting a "loading"-attribute in my redux-store, if the action is fetching. Now I want to show a network indicator the app is fetching data.
I found a quick&dirty solution but I am sure, that this is not the way to do it:
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);
What is the correct way to hook such a listener?

Answer 1

To avoid calling StatusBar.setNetworkActivityIndicatorVisible too many times, you can watch the changes in your state using componentWillReceiveProps in your connected component.
import AppContainer from './containers/AppContainer';
class AppName extends Component {
render() {
return (
<Provider store={store}>
<AppContainer />
</Provider>
);
}
}
containers/AppContainer.js
import App from '../components/App.js';
const mapStateToProps = state => ({
loading: state.dishes.loading || state.deals.loading
});
export default connect(mapStateToProps)(App);
components/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);
}
}
// ...
}