dispacthing actions creator gets called twice using componentWillMount
<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>