title: react with redux and react-router dispatches action twice
body: <p>I just started to experiment with react and redux and I face couple of issues on the way.</p>
  
  <p>When I try to render async data on route change the dispatched action is getting fired twice. First is undefined and than comes the real data.</p>
  
  <p>Here is my store</p>
  
  <pre><code>import { createStore, combineReducers, applyMiddleware } from 'redux'
  import createLogger from 'redux-logger'
  import thunk from 'redux-thunk'
  import { routerReducer, routerMiddleware, push } from 'react-router-redux'
  import reducers from '../reducers'
  import { browserHistory } from 'react-router';
  
  const middleware = [ thunk ];
  if (process.env.NODE_ENV !== 'production') {
      middleware.push(createLogger());
  }
  
  middleware.push(routerMiddleware(browserHistory));
  
  
      // Add the reducer to your store on the `routing` key
      const store = createStore(
          combineReducers({
              reducers,
              routing: routerReducer
          }),
          applyMiddleware(...middleware),
  
      )
  
      export default store;
  </code></pre>
  
  <p>reducer</p>
  
  <pre><code>export const RESOLVED_GET_PROFILE = 'RESOLVED_GET_PROFILE'
  
  const profileReducer = (state = {}, action) =&gt; {
      switch (action.type) {
          case 'SET_PROFILE':
                return  {profile: action.profile}
  
          default:
              return state;
      }
  };
  
  export default profileReducer;
  </code></pre>
  
  <p>actions</p>
  
  <pre><code>import * as types from './actionTypes';
  import Api from '../middleware/Api';
  
  export function getProfile() {
      return dispatch =&gt; {
          dispatch(setLoadingProfileState()); // Show a loading spinner
          Api.get('profile').then(profile =&gt; {
              dispatch(doneFetchingProfile);
              dispatch(setProfile(profile));
          }).catch(error =&gt; {
              dispatch(showError(error));
              throw(error);
          });
      }
  }
  
  function setProfile(data) {
      return {
          type: types.SET_PROFILE,
          profile: data
      }
  }
  
  
  function setLoadingProfileState() {
      return {
          type: types.SHOW_SPINNER,
          loaded: false
      }
  }
  
  function doneFetchingProfile() {
      return {
          type: types.HIDE_SPINNER,
          loaded: true
      }
  }
  
  function showError() {
      return {
          type: types.SHOW_ERROR,
          loaded: false,
          error: 'error'
      }
  }
  </code></pre>
  
  <p>and here is my component</p>
  
  <pre><code>import React, {PropTypes, Component} from 'react';
  import {bindActionCreators} from 'redux';
  import {connect} from 'react-redux';
  import * as profileActions from '../../../actions/profileActions';
  
  
  class Profile extends Component {
  
      static propTypes = {
          profile: PropTypes.object.isRequired,
      };
  
      constructor(props) {
          super(props);
  
          this.state = {
              profile:{
                  username: '',
                  password: '',
                  email: ''
              }
          }
          this.onUpdate = this.onUpdate.bind(this)
      }
  
      onUpdate(event) {
          alert()
      }
  
      componentDidMount() {
          //here I dispatch the action
          this.props.actions.getProfile()
      }
  
      componentWillReceiveProps(nextProps) {
  
      }
  
      render() {
          console.log(this.props)
          //this.props.profile on first is undefined and then filled
          const { profile } = this.props.profile
  
          return (
              &lt;div&gt;
  
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state) {
  
      return {
          profile: state.default.profile,
      };
  }
  
  function mapDispatchToProps(dispatch) {
      return {
          actions: bindActionCreators(profileActions, dispatch)
      };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Profile);
  </code></pre>
  
  <p>what do I wrong?</p>
  
  <p><a href="https://i.stack.imgur.com/crHNx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/crHNx.png" alt="console"></a></p>