Redux state not resetting on history.push - node.js

Question

I have 2 React components, MyPolls and NewPoll.
MyPolls 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 skip and limit.
My problem right now is that whenever I create a new poll, it redirects me to the MyPolls component via history.push('/mypolls') in my action creator and the order of my polls list gets messed up.
Let's say there are currently 8 polls in my mongoDB:
1 2 3 4 5 6 7 8 (1 being oldest, and 8 being newest).
When I view MyPolls, it will show 8 7 6 5. And if you click 'Load More', you will see the other 4: 8 7 6 5 4 3 2 1.
But after you create a new poll, 9, you will get redirected to MyPolls and it will show this order 8 7 6 5 9 8 7 6 instead (shows 8 instead of 4 on initial rendering).
What's causing this? It seems like my reducer state is not resetting ?
MyPolls.js
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(() => {
setTimeout(() => {
this.setState({
skip: this.state.skip + 4,
isLoading: false
});
}, 1000);
});
}
loadMore(skip) {
this.setState({ isLoadingMore: true });
setTimeout(() => {
this.props.fetchMyPolls(skip)
.then(() => {
const nextSkip = this.state.skip + 4;
this.setState({
skip: nextSkip,
isLoadingMore: false
});
});
}, 1000);
}
renderPolls() {
return this.props.polls.map(poll => {
return (
<Poll
key={poll._id}
title={poll.title}
options={poll.options}
/>
)
})
}
render() {
console.log(this.props.polls);
console.log('skip:', this.state.skip);
return (
<div className='center-align container'>
<h2>My Polls</h2>
{this.state.isLoading ? <Loading size='big' /> :
<div
style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-evenly',
alignItems: 'center',
alignContent: 'center'
}}>
{this.renderPolls()}
</div>}
<div className='row'>
{this.state.isLoadingMore ? <Loading size='small' /> :
<button
className='btn red lighten-2 wave-effect waves-light' onClick={() => this.loadMore(this.state.skip)}>
Load More
</button>}
</div>
</div>
);
}
}
function mapStateToProps({ polls }) {
return { polls }
}
export default connect(mapStateToProps, actions)(MyPolls);
NewPoll.js
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 (
<ul>
{props.fields.map((option, index) => (
<li key={index}>
<div
className='card'
style={cardStyle}>
<Field
type='text'
name={option}
index={index}
component={this.renderOptionCard}
/>
<i
className='material-icons right'
onClick={() => props.fields.remove(index)}
>
delete
</i>
</div>
<div className='red-text'>
{props.meta.error }
</div>
</li>
))}
</ul>
);
}
renderOptionCard({ index, input }) {
return (
<span className='card-title'
style={{ flex: '1' }}>
{`${index + 1})`} {input.value}
</span>
);
}
renderTitle({ input, type, placeholder, meta: { touched, error }}) {
return (
<div>
<div className='input-field inline'>
<input {...input}
type={type}
placeholder={placeholder}
style={{ width: '350px' }}
/>
<div className='red-text'>
{touched && error}
</div>
</div>
<button
type='text'
className='red lighten-2 btn waves-effect waves-light'
onClick={() => {
this.setState({ title: input.value });
input.value = '';
}}
disabled={!input.value}>
Add Title
<i className='material-icons right'>
add
</i>
</button>
</div>
)
}
renderTitleCard({ input }) {
return (
<div
className='card'
style={cardStyle}>
<span className='card-title' style={{ flex: '1' }}>
<strong><u>{input.value}</u></strong>
</span>
<i className='material-icons right' onClick={() => this.setState({ title: '' })}>
delete
</i>
</div>
)
}
onPollSubmit(values) {
const { history } = this.props;
this.props.submitPoll(values, history);
}
render() {
return (
<div className='center-align'>
<h3>Create a new poll:</h3>
<form onSubmit={this.props.handleSubmit(this.onPollSubmit.bind(this))}>
<Field
type='text'
placeholder='Title'
name='title'
component={this.state.title ? this.renderTitleCard : this.renderTitle}
/>
<FieldArray
name='options' component={this.renderOption}
/>
<div className='row'>
<div className='inline input-field'>
<input
value={this.state.option} onChange={this.onOptionInputChange}
placeholder='Option'
style={{ width: '300px' }}
/>
</div>
<button
type='text'
className='red lighten-2 btn waves-effect waves-light'
onClick={this.onAddOption}
disabled={!this.state.option}
>
Add Option
<i className='material-icons right'>
add
</i>
</button>
</div>
<button
type='submit'
className='teal btn-large waves-effect waves-light'
>
Submit
<i className='material-icons right'>
send
</i>
</button>
</form>
</div>
);
}
}
function validate(values) {
const errors = {};
if (!values.title) {
errors.title = 'You must provide a title';
}
if (!values.options || values.options.length < 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));
action creators:
export const submitPoll = (values, history) => async dispatch => {
const res = await axios.post('/api/polls', values);
history.push('/mypolls');
dispatch({ type: FETCH_USER, payload: res.data });
}
export const fetchMyPolls = (skip) => async dispatch => {
const res = await axios.get(`/api/mypolls/${skip}`);
dispatch({ type: FETCH_MY_POLLS, payload: res.data });
}
Poll routes:
app.post('/api/polls', requireLogin, (req, res) => {
const { title, options } = req.body;
const poll = new Poll({
title,
options: options.map(option => ({ option: option.trim() })),
dateCreated: Date.now(),
_user: req.user.id
});
poll.save();
res.send(req.user);
});
app.get('/api/mypolls/:skip', requireLogin, (req, res) => {
Poll.find({ _user: req.user.id })
.sort({ dateCreated: -1 })
.skip(parseInt(req.params.skip))
.limit(4)
.then(polls => {
res.send(polls);
});
});
Poll reducer:
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 => {
if (poll._id === action.payload._id) {
return action.payload;
}
return poll;
})
)
default:
return state;
}
}
Demo of the app: https://voting-app-drhectapus.herokuapp.com
(Use riverfish#gmail.com and password 123 to login)
Github: https://github.com/drhectapus/voting-app

Answer 1

The MyPolls component is calling fetchMyPolls with 0 on componentDidMount. What is happening is, at first you are visiting /mypolls and server returns polls [8, 7, 6, 5]. This make your polls state [8,7,6,5]. When you create a new poll (say 9), you are redirected to /mypolls/ and calling againg fetchMyPolls with 0. Pay attention that in pollsReducer you have
case FETCH_MY_POLLS:
return [ ...state, ...action.payload];
which simply appends new polls to the end of the state. That's why the new state becomes [8, 7, 6, 5, 9, 8, 7, 6].
You are right that reducer doesn't reset the state. There is no action described in your app doing this. Indeed, it is a good thing not to reset your state, because the client already received the information, why not to use them instead of making a new request to the backend.
A good solution would be defining a new action, eg. FETCH_NEW_POLL and adding a new case to the pollsReducer
case FETCH_NEW_POLL
return [...action.payload, ...state];
You would also need to modify your reducer to have only unique items in your state.
In addition, in App.js you can use onEnter to fetch first 4 polls only if there is none in the state. This way you can remove fetchMyPolls call from the componentDidMount of MyPolls.