title: Second Redux @@INIT action clears the store state which already was modified with another action
body: <p>I'm new to React/Redux and not sure if I'm not doing something wrong. </p>
  
  <p>I'm having a component which makes an AJAX call on <code>componentDidMount</code> to fetch data from the server to render.</p>
  
  <p>The problem is that Redux is dispatching two <code>@INIT</code> actions and often the second one is dispatched after I already received the response from the server. It comes with an empty (initial) state which is passed to the component props and, as result, I receive a blank screen.</p>
  
  <p>Please see this log produced by the reducer:
  <a href="https://i.stack.imgur.com/Wcxrb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wcxrb.png" alt="enter image description here"></a></p>
  
  <p>I already found that having two <code>@@INIT</code> actions is an expected behavior, the first one is needed to test the reducers and the second one is an actual init (check the discussion <a href="https://github.com/reactjs/redux/issues/382#issuecomment-280333581" rel="nofollow noreferrer">here</a>).</p>
  
  <p>The question is how can I solve this issue in a proper way. Is it a race condition or am I doing something wrong? Thanks!</p>
  
  <p><strong>Update</strong>
  What is interesting is that it definitely relates to the performance of my laptop. The server is also running on my local environment. To allow me to proceed with development while I'm waiting for the answer I temporarily put <code>setTimeout</code> with 100ms delay into <code>componentDidMount</code>. Now I commented it and can't repro the issue.</p>
  
  <p><strong>Update</strong> Adding pieces of my code</p>
  
  <p>Store</p>
  
  <pre><code>import { createStore, applyMiddleware, compose } from 'redux';
  import thunk from 'redux-thunk';
  
  import reducers from './reducers';
  
  const middleware = window.devToolsExtension
      ? compose(
          applyMiddleware(thunk),
          window.devToolsExtension()
      )
      : applyMiddleware(thunk);
  
  const store = createStore(reducers, middleware);
  
  export default store;
  </code></pre>
  
  <p>Reducer (nothing special, just used it to log the action because browser Redux extension shows only one <code>@@INIT</code> action)</p>
  
  <pre><code>import * as types from '../actions/types';
  
  const initialState = {
      listings: []
  };
  
  export default function(state = initialState, action) {
      console.log(action, state);
      switch (action.type) {
          case types.LISTINGS_FOUND:
              return { listings: action.payload };
  
          default: return state;
      }
  };
  </code></pre>
  
  <p>Component</p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  
  import { search as searchListings } from '../../actions/listing-actions'
  import View from './View'
  
  class Container extends React.Component {
      componentDidMount() {
          if (this.props.listings.length === 0) {
              this.props.searchListings();
          }
      }
  
      render() {
          console.log('rendering list', this.props.listings);
          return (
              &lt;View listings={this.props.listings}/&gt;
          );
      }
  }
  
  Container.propTypes = {
      listings: React.PropTypes.arrayOf(React.PropTypes.object).isRequired,
      searchListings: React.PropTypes.func.isRequired,
  };
  
  const mapStateToProps = function(store) {
      return {
          listings: store.listingSearch.listings
      };
  };
  
  export default connect(mapStateToProps, { searchListings })(Container);
  </code></pre>
  
  <p>As I said I can't repro this issue now. I'll try to make some synthetic example to repro this later when I have more time.</p>