title: Add a load indicator based on the Redux state - react native
body: <p>How can I add a charging indicator based on the Redux status?</p>
  <p>I need to place a loading screen while sending the data.</p>
  <blockquote>
  <p>charging indicator component</p>
  </blockquote>
  <pre><code>import React from 'react';
  import { StyleSheet } from 'react-native';
  import AnimatedLoader from &quot;react-native-animated-loader&quot;;
  
  import {connect} from 'react-redux'
  
  class Loader extends React.Component {
    constructor(props) {
      super(props);
      this.state = {visible: false };
    }
  
    // componentDidMount() {
    //   setInterval(() =&gt; {
    //     this.setState({
    //       visible: !this.state.visible
    //     });
    //   }, 2000);
    // }
  
    render() {
      const { visible } = this.props;
  
      if (!visible) return outVisible();
  
          return (
              &lt;AnimatedLoader
              visible={visible}
              overlayColor=&quot;rgba(255,255,255,0.75)&quot;
              source={require(&quot;./loader.json&quot;)}
              animationStyle={styles.lottie}
              speed={1}
            &gt;
                &lt;Text&gt;Carregando...&lt;/Text&gt;
              &lt;/AnimatedLoader&gt;
              );
    }
  }
  
  const styles = StyleSheet.create({
    lottie: {
      width: 200,
      height: 200
    }
  });
  
  const mapStateToProps = (state) =&gt; ({visible: state.visible});
  
  const mapDispatchToProps = dispatch =&gt; {
    return {outVisible: () =&gt; dispatch(setVisible({visible: false}))}
  }
  
  export default connect(mapStateToProps,mapDispatchToProps)(Loader)
  </code></pre>
  <blockquote>
  <p>Action</p>
  </blockquote>
  <pre><code>import { SET_VISIBLE } from './actionsTypes'
  
  export const setVisible = visible =&gt; {
      return {
          type: SET_VISIBLE,
          payload: visible
      }
  }
  </code></pre>
  <blockquote>
  <p>Reducer</p>
  </blockquote>
  <pre><code>import { SET_VISIBLE } from '../actions/actionsTypes'
  
  const initialState = {
      visible: false
  }
  
  const reducer = (state = initialState, action) =&gt; {
      switch(action.type) {
        case SET_VISIBLE:
          return {
              ...state,
              visible: action.payload.visible
          };
        default:
          return state;
      }
  }
  
  export default reducer
  </code></pre>
  <blockquote>
  <p>Store Config</p>
  </blockquote>
  <pre><code>import {
    createStore,
    combineReducers,
    compose,
    applyMiddleware
  } from 'redux'
  import thunk from 'redux-thunk'
  
  import postReducer from './reducers/post'
  import userReducer from './reducers/user'
  import messageReducer from './reducers/message'
  import loadingReducer from './reducers/loading'
  
  const reducers = combineReducers({
    user: userReducer,
    post: postReducer,
    message: messageReducer,
    visible: loadingReducer
  })
  
  const storeConfig = () =&gt; {
    return createStore(reducers, compose(applyMiddleware(thunk)))
  }
  
  export default storeConfig
  </code></pre>
  <blockquote>
  <p>actions types</p>
  </blockquote>
  <pre><code>export const USER_LOGGED_IN = 'USER_LOGGED_IN'
  export const USER_LOGGED_OUT = 'USER_LOGGED_OUT'
  export const SET_MESSAGE = 'SET_MESSAGE'
  export const LOADING_USER = 'LOADING_USER'
  export const USER_LOADED = 'USER_LOADED'
  export const CREATING_POST = 'CREATING_POST'
  export const POST_CREATED = 'POST_CREATED'
  export const SET_POSTS = 'SET_POSTS'
  
  export const SET_VISIBLE = 'SET_VISIBLE'
  </code></pre>
  <blockquote>
  <p>app.js</p>
  </blockquote>
  <pre><code>import React, { Component } from 'react'
  import { Alert } from 'react-native'
  import { connect } from 'react-redux'
  import Routes from &quot;./routes&quot;;
  import { setMessage } from './store/actions/message'
  
  class App extends Component {
      componentDidUpdate = () =&gt; {
          if(this.props.text &amp;&amp; this.props.text.toString().trim())
          {
              Alert.alert(this.props.title || 'Mensagem',this.props.text.toString())
              this.props.clearMessage()
          }
      }
  
      render() {
          return (
              &lt;Routes /&gt;
          )
      }
  }
  
  const mapStateToProps = ({ message}) =&gt; {
      return {
          title: message.title,
          text: message.text,
      }
  }
  
  const mapDispatchToProps = dispatch =&gt; {
      return {
          clearMessage: () =&gt; dispatch(setMessage({ title: '', text: '' }))
      }
  
  }
  
  
  export default connect(mapStateToProps, mapDispatchToProps)(App)
  </code></pre>
  <p>Right after the data is sent to the API, I need to return a load indicator to the user, until that data is stored.</p>