title: dispacthing actions creator gets called twice using componentWillMount
body: <p>I call action creator using <strong>componentWillMount method,</strong> then it gets called twice. look at below screenshot of the result.</p>
  
  <p><a href="https://i.stack.imgur.com/1Xi1D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1Xi1D.png" alt="enter image description here"></a></p>
  
  <p>this is my action <strong>creator</strong> :</p>
  
  <pre><code>export function fetchAdmin(){
      return (dispatch)=&gt;{
          axios.get(`${Config.API_URL}/admin`,{
              headers: { authorization: localStorage.getItem('token')}
          })
              .then(response =&gt; {
                     return dispatch({
                          type: FETCH_DATA,
                          payload: response.data
                      });
                  }
              )
              .catch(response =&gt; {
                  console.log(response);
              });
      }
  }
  </code></pre>
  
  <p>and this is my <strong>reducer</strong> :</p>
  
  <pre><code>import { FETCH_DATA } from '../actions/types';
  
  export function admin(state= {}, action){
      switch(action.type){
          case FETCH_DATA:
              return {...state, lists: action.payload };
          default:
              return { state, lists: 'YEY!'}
      }
  
  
  }
  </code></pre>
  
  <p>and this is my container and the way i call my action creator using componentWillMount.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Link } from 'react-router';
  import { connect } from 'react-redux';
  import * as actions from 'actions/admin_action';
  
  
  class Admin extends Component{
      componentWillMount(){
          this.props.fetchAdmin()
      }
      renderData(){
          var lists = this.props.lists;
          console.log(lists);
      }
    render(){
  
          return(
            &lt;div&gt;
              {this.renderData()}
            &lt;/div&gt;
          )
    }
  
  const mapStateToProps = (state) =&gt; {
       return { lists: state.admin.lists };
  }
  
  export default connect(mapStateToProps, actions)(Admin);
  </code></pre>
  
  <p>from the screenshot i assume that render() gets called twice. the first call goes to default action creator so that the result is "YEY!" and the second is the valid one.</p>
  
  <p>can someone explain it to me why componentWillMount perform like this and actually in the first render i just wanna my array not "YEY!" how to solve this problem? Thank you.</p>