title: Redux state not resetting on history.push
body: <p>I have 2 React components, <code>MyPolls</code> and <code>NewPoll</code>.</p>
  
  <p><code>MyPolls</code> renders the last 4 polls created by a certain user and each time you press a 'Load more button', it renders 4 more. This is done by making a mongoose call to my mongoDB by sorting in desending order by date and using <code>skip</code> and <code>limit</code>. </p>
  
  <p>My problem right now is that whenever I create a new poll, it redirects me to the <code>MyPolls</code> component via <code>history.push('/mypolls')</code> in my action creator and the order of my polls list gets messed up.</p>
  
  <p>Let's say there are currently 8 polls in my mongoDB:</p>
  
  <p><code>1 2 3 4 5 6 7 8</code> (1 being oldest, and 8 being newest).</p>
  
  <p>When I view <code>MyPolls</code>, it will show <code>8 7 6 5</code>. And if you click 'Load More', you will see the other 4: <code>8 7 6 5 4 3 2 1</code>.</p>
  
  <p><strong>But</strong> after you create a new poll, <code>9</code>, you will get redirected to <code>MyPolls</code> and it will show this order <code>8 7 6 5 9 8 7 6</code> instead (shows 8 instead of 4 on initial rendering).</p>
  
  <p>What's causing this? It seems like my reducer state is not resetting ?</p>
  
  <p><strong>MyPolls.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import * as actions from '../../actions';
  import Loading from '../Loading';
  import Poll from './Poll';
  
  class MyPolls extends Component {
    constructor(props) {
      super(props);
      this.state = {
        skip: 0,
        isLoading: true,
        isLoadingMore: false,
      };
    }
  
    componentDidMount() {
      this.props.fetchMyPolls(this.state.skip)
        .then(() =&gt; {
          setTimeout(() =&gt; {
              this.setState({
              skip: this.state.skip + 4,
              isLoading: false
            });
          }, 1000);
        });
    }
  
  
  
    loadMore(skip) {
      this.setState({ isLoadingMore: true });
  
      setTimeout(() =&gt; {
        this.props.fetchMyPolls(skip)
          .then(() =&gt; {
            const nextSkip = this.state.skip + 4;
            this.setState({
              skip: nextSkip,
              isLoadingMore: false
            });
          });
      }, 1000);
    }
  
    renderPolls() {
      return this.props.polls.map(poll =&gt; {
        return (
          &lt;Poll
            key={poll._id}
            title={poll.title}
            options={poll.options}
          /&gt;
        )
      })
    }
  
    render() {
      console.log(this.props.polls);
      console.log('skip:', this.state.skip);
      return (
        &lt;div className='center-align container'&gt;
          &lt;h2&gt;My Polls&lt;/h2&gt;
          {this.state.isLoading ? &lt;Loading size='big' /&gt; :
          &lt;div
            style={{
              display: 'flex',
              flexWrap: 'wrap',
              justifyContent: 'space-evenly',
              alignItems: 'center',
              alignContent: 'center'
            }}&gt;
            {this.renderPolls()}
          &lt;/div&gt;}
          &lt;div className='row'&gt;
            {this.state.isLoadingMore ? &lt;Loading size='small' /&gt; :
            &lt;button
              className='btn red lighten-2 wave-effect waves-light' onClick={() =&gt; this.loadMore(this.state.skip)}&gt;
              Load More
            &lt;/button&gt;}
          &lt;/div&gt;
        &lt;/div&gt;
  
      );
    }
  }
  
  function mapStateToProps({ polls }) {
    return { polls }
  }
  
  export default connect(mapStateToProps, actions)(MyPolls);
  </code></pre>
  
  <p><strong>NewPoll.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { reduxForm, Field, FieldArray, arrayPush } from 'redux-form';
  import * as actions from '../../actions';
  import { withRouter } from 'react-router-dom';
  
  const cardStyle = {
    width: '500px',
    height: '75px',
    margin: '10px auto',
    display: 'flex',
    alignItems: 'center',
    padding: '10px'
  };
  
  class NewPoll extends Component {
    constructor(props) {
      super(props);
      this.state = {
        showOptions: false,
        option: '',
        title: ''
      };
      this.onOptionInputChange = this.onOptionInputChange.bind(this);
      this.onAddOption = this.onAddOption.bind(this);
      this.renderOption = this.renderOption.bind(this);
      this.renderOptionCard = this.renderOptionCard.bind(this);
      this.renderTitle = this.renderTitle.bind(this);
      this.renderTitleCard = this.renderTitleCard.bind(this);
    }
  
    onOptionInputChange(event) {
      this.setState({ option: event.target.value });
    }
  
    onAddOption() {
      const { dispatch } = this.props;
  
      dispatch(arrayPush('newPollForm', 'options', this.state.option));
      this.setState({ option: '' });
    }
  
    renderOption(props) {
      return (
        &lt;ul&gt;
          {props.fields.map((option, index) =&gt; (
              &lt;li key={index}&gt;
                &lt;div
                  className='card'
                  style={cardStyle}&gt;
                  &lt;Field
                    type='text'
                    name={option}
                    index={index}
                    component={this.renderOptionCard}
                  /&gt;
                  &lt;i
                    className='material-icons right'
                    onClick={() =&gt; props.fields.remove(index)}
                  &gt;
                    delete
                  &lt;/i&gt;
                &lt;/div&gt;
                &lt;div className='red-text'&gt;
                  {props.meta.error }
                &lt;/div&gt;
              &lt;/li&gt;
          ))}
        &lt;/ul&gt;
      );
    }
  
    renderOptionCard({ index, input }) {
      return (
          &lt;span className='card-title'
            style={{ flex: '1' }}&gt;
            {`${index + 1})`} {input.value}
          &lt;/span&gt;
      );
    }
  
    renderTitle({ input, type, placeholder, meta: { touched, error }}) {
      return (
        &lt;div&gt;
          &lt;div className='input-field inline'&gt;
            &lt;input {...input}
              type={type}
              placeholder={placeholder}
              style={{ width: '350px' }}
            /&gt;
            &lt;div className='red-text'&gt;
              {touched &amp;&amp; error}
            &lt;/div&gt;
          &lt;/div&gt;
            &lt;button
              type='text'
              className='red lighten-2 btn waves-effect waves-light'
              onClick={() =&gt; {
                this.setState({ title: input.value });
                input.value = '';
              }}
              disabled={!input.value}&gt;
              Add Title
              &lt;i className='material-icons right'&gt;
                add
              &lt;/i&gt;
            &lt;/button&gt;
        &lt;/div&gt;
      )
    }
  
    renderTitleCard({ input }) {
      return (
        &lt;div
          className='card'
          style={cardStyle}&gt;
          &lt;span className='card-title' style={{ flex: '1' }}&gt;
            &lt;strong&gt;&lt;u&gt;{input.value}&lt;/u&gt;&lt;/strong&gt;
          &lt;/span&gt;
          &lt;i className='material-icons right' onClick={() =&gt; this.setState({ title: '' })}&gt;
            delete
          &lt;/i&gt;
        &lt;/div&gt;
      )
    }
  
    onPollSubmit(values) {
      const { history } = this.props;
      this.props.submitPoll(values, history);
    }
  
    render() {
      return (
        &lt;div className='center-align'&gt;
          &lt;h3&gt;Create a new poll:&lt;/h3&gt;
          &lt;form onSubmit={this.props.handleSubmit(this.onPollSubmit.bind(this))}&gt;
            &lt;Field
              type='text'
              placeholder='Title'
              name='title'
              component={this.state.title ? this.renderTitleCard : this.renderTitle}
            /&gt;
            &lt;FieldArray
              name='options' component={this.renderOption}
            /&gt;
            &lt;div className='row'&gt;
              &lt;div className='inline input-field'&gt;
                &lt;input
                  value={this.state.option} onChange={this.onOptionInputChange}
                  placeholder='Option'
                  style={{ width: '300px' }}
                /&gt;
              &lt;/div&gt;
              &lt;button
                type='text'
                className='red lighten-2 btn waves-effect waves-light'
                onClick={this.onAddOption}
                disabled={!this.state.option}
              &gt;
                Add Option
                &lt;i className='material-icons right'&gt;
                  add
                &lt;/i&gt;
              &lt;/button&gt;
            &lt;/div&gt;
  
            &lt;button
              type='submit'
              className='teal btn-large waves-effect waves-light'
            &gt;
              Submit
              &lt;i className='material-icons right'&gt;
                send
              &lt;/i&gt;
            &lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  
  function validate(values) {
    const errors = {};
  
    if (!values.title) {
      errors.title = 'You must provide a title';
    }
  
    if (!values.options || values.options.length &lt; 2) {
      errors.options = { _error: 'You must provide at least 2 options' };
    }
    return errors;
  }
  
  NewPoll = reduxForm({
    form: 'newPollForm',
    validate
  })(NewPoll);
  
  
  export default connect(null, actions)(withRouter(NewPoll));
  </code></pre>
  
  <p><strong>action creators:</strong></p>
  
  <pre><code>export const submitPoll = (values, history) =&gt; async dispatch =&gt; {
    const res = await axios.post('/api/polls', values);
    history.push('/mypolls');
    dispatch({ type: FETCH_USER, payload: res.data });
  }
  
  export const fetchMyPolls = (skip) =&gt; async dispatch =&gt; {
    const res = await axios.get(`/api/mypolls/${skip}`);
  
    dispatch({ type: FETCH_MY_POLLS, payload: res.data });
  }
  </code></pre>
  
  <p><strong>Poll routes:</strong></p>
  
  <pre><code>app.post('/api/polls', requireLogin, (req, res) =&gt; {
  
      const { title, options } = req.body;
  
      const poll = new Poll({
        title,
        options: options.map(option =&gt; ({ option: option.trim() })),
        dateCreated: Date.now(),
        _user: req.user.id
      });
  
      poll.save();
      res.send(req.user);
    });
  
    app.get('/api/mypolls/:skip', requireLogin, (req, res) =&gt; {
  
      Poll.find({ _user: req.user.id })
        .sort({ dateCreated: -1 })
        .skip(parseInt(req.params.skip))
        .limit(4)
        .then(polls =&gt; {
          res.send(polls);
        });
    });
  </code></pre>
  
  <p><strong>Poll reducer:</strong></p>
  
  <pre><code>import { FETCH_MY_POLLS, UPDATE_POLL } from '../actions/types';
  
  export default function(state = [], action) {
    switch(action.type) {
      case FETCH_MY_POLLS:
        return [ ...state, ...action.payload];
      case UPDATE_POLL:
        return (
          [...state].map(poll =&gt; {
            if (poll._id === action.payload._id) {
              return action.payload;
            }
            return poll;
          })
        )
      default:
        return state;
    }
  }
  </code></pre>
  
  <p>Demo of the app: <a href="https://voting-app-drhectapus.herokuapp.com" rel="nofollow noreferrer">https://voting-app-drhectapus.herokuapp.com</a></p>
  
  <p>(Use <code>riverfish@gmail.com</code> and password <code>123</code> to login)</p>
  
  <p>Github: <a href="https://github.com/drhectapus/voting-app" rel="nofollow noreferrer">https://github.com/drhectapus/voting-app</a></p>