Redux状态未在history.push上重置

Question

我有2个React组件，MyPolls和NewPoll。

MyPolls呈现由特定用户创建的最后4个民意调查，每次按下“加载更多按钮”时，它会再渲染4个。这是通过按日期排序并使用skip和limit对我的mongoDB进行mongoose调用来完成的。

我现在的问题是，每当我创建一个新的民意调查时，它会在我的动作创建者中通过MyPolls将我重定向到history.push('/mypolls')组件，并且我的民意调查列表的顺序会搞砸。

让我们说我的mongoDB目前有8个民意调查：

1 2 3 4 5 6 7 8（1是最早的，8是最新的。）

当我查看MyPolls时，它会显示8 7 6 5。如果您点击“加载更多”＆＃39;，您会看到其他4：8 7 6 5 4 3 2 1。

但是在您创建新的投票9后，您将被重定向到MyPolls，它会显示此订单8 7 6 5 9 8 7 6（而不是显示8）在初始渲染时为4。

造成这种情况的原因是什么？似乎我的减速器状态没有重置？

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));

动作创作者：

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 });
}

投票路线：

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);
      });
  });

轮询减速机：

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;
  }
}

应用的演示：https://voting-app-drhectapus.herokuapp.com

（使用riverfish@gmail.com和密码123登录）

Github：https://github.com/drhectapus/voting-app

Answer 1

MyPolls组件在fetchMyPolls上使用0呼叫componentDidMount。发生的事情是，首先您正在访问/mypolls并且服务器返回民意调查[8, 7, 6, 5]。这使您的民意调查成为[8,7,6,5]。当您创建新的民意调查（例如9）时，系统会将您重定向到/mypolls/并使用fetchMyPolls调用againg 0。请注意pollsReducer你有

case FETCH_MY_POLLS: return [ ...state, ...action.payload]; 它只是简单地将新的民意调查附加到州的末尾。这就是新状态变为[8, 7, 6, 5, 9, 8, 7, 6]的原因。

你是对的，减速器不会重置状态。您的应用中没有描述操作。实际上，不重置您的状态是一件好事，因为客户已经收到了信息，为什么不使用它们而不是向后端发出新的请求。

一个好的解决方案是定义一个新的动作，例如。 FETCH_NEW_POLL并向pollsReducer

添加新案例

case FETCH_NEW_POLL return [...action.payload, ...state];

您还需要修改您的减速器，使其只有您所在州的唯一商品。

此外，在App.js中，只有当州内没有民意调查时，您才可以使用onEnter来获取前4轮民意调查。这样，您就可以从fetchMyPolls的{​​{1}}移除componentDidMount来电。