title: Redux State Overwritten by Default State from Reducer
body: <p>In my react/redux app, I'm dispatching an API call that populates my app's state, from the component below. The call is successful - all of the appropriate data comes back from the server, and the redux state is correctly populated. However, immediately after the state is correctly populated, it is overwritten by the default state from the reducer. I can't locate the source of the problem.</p>
  
  <p>Here is my react component:</p>
  
  <pre><code>class ShowCoursesStudentParent extends React.Component&lt;Props&gt; {
    componentDidMount() {
      this.props.getAPIData(coursesStudentID);
    }
    render() {
      return (
        &lt;div&gt;
          &lt;CourseStudentEventsParent /&gt;
          &lt;CourseEventsParent /&gt;
          &lt;CreateCourseEvent /&gt;
          &lt;BigCalendarParent /&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapDispatchToProps = dispatch =&gt; ({
    getAPIData: coursesStudentID =&gt; dispatch(getAPIDetails(coursesStudentID))
  });
  
  const mapStateToProps = state =&gt; {
    console.log(state);
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(ShowCoursesStudentParent);
  </code></pre>
  
  <p>The <code>console.log(state)</code> in <code>mapStateToProps</code> fires three times - first with the empty object from the reducer's default state, second with the correct data from the server, and then a third time with the empty object from the reducer's default state.</p>
  
  <p>Here is the action creator:</p>
  
  <pre><code>export function addAPIData(apiData: apiData) {
    return { type: ADD_API_DATA, payload: apiData };
  }
  
  export function getAPIDetails(id: number) {
    return (dispatch: Function) =&gt; {
      axios
        .get(`/get_api_data/${id}`)
        .then(response =&gt; {
          dispatch(addAPIData(response.data));
        })
        .catch(error =&gt; {
          console.log('getAPIDetails', error); //eslint-disable-line
        });
    };
  }
  </code></pre>
  
  <p>And the reducer (I've removed the other functions for simplicity):</p>
  
  <pre><code>const apiData = (state = {}, action) =&gt; {
    if (action.type === ADD_API_DATA) {
      return action.payload;
    }
    return state;
  };
  
  const rootReducer = combineReducers({
    apiData
  });
  
  export default rootReducer;
  </code></pre>
  
  <p>Store:</p>
  
  <pre><code>// @flow
  import { createStore, compose, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  import rootReducer from './reducers';
  
  const store = createStore(
    rootReducer,
    compose(
      applyMiddleware(thunk),
      typeof window === 'object' &amp;&amp; typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : f =&gt; f
    )
  );
  
  export default store;
  </code></pre>
  
  <p>FYI - I'm using flow for type checking. Any help is greatly appreciated!</p>