React / Redux：尽管正确的调度和状态更改，组件仍未重绘。 （不涉及突变）

Question

我的redux应用程序出现问题：它正确调度相关操作并更新状态，但由于某种原因，UI无法更新。 99％的问题似乎是因为州实际上发生了变异，但我很确定并非如此。以下是相关文件：

容器组件：

＆＃13;

＆＃13;

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import requestEvents from 'actions/feedActions';
import { FeedElement, feedElementTypes } from '../components/feed/feedElement';

class Feed extends React.Component {
  componentWillMount() {
    this.props.requestEvents();
  }
  render() {
    console.log('Rendering feed');
    const listOfFeedElements = this.props.listOfFeedElements;
    let elementsToDisplay;
    if (listOfFeedElements.length === 0) {
      elementsToDisplay = <li><p> No elements to display</p></li>;
    } else {
      const numOfElementsToDisplay = listOfFeedElements.length <= 10 ?
      listOfFeedElements.length : 10;

      const sortedElementsToDisplay = listOfFeedElements.concat().sort(
      (e1, e2) => e1.timestamp - e2.timeStamp);

      elementsToDisplay =
      sortedElementsToDisplay
        .slice(0, numOfElementsToDisplay)
        .map(el => FeedElement(el));
    }

    return (
      <div className="socialFeedContainer">
        <h1> Social feed </h1>
        <ol>
          {elementsToDisplay}
        </ol>
      </div>

    );
  }
}

Feed.propTypes = {
  requestEvents: PropTypes.func.isRequired,
  listOfFeedElements: PropTypes.arrayOf(PropTypes.shape({
    timeStamp: PropTypes.number.isRequired,
    type: PropTypes.oneOf(Object.keys(feedElementTypes)).isRequired,
    targetDeck: PropTypes.string.isRequired,
    concernedUser: PropTypes.string.isRequired,
    viewed: PropTypes.bool.isRequired })),
};

Feed.defaultProps = {
  listOfFeedElements: [],
};


function mapDispatchToProps(dispatch) {
  return bindActionCreators({ requestEvents }, dispatch);
}

function mapStateToProps(state) {
  const { feedState } = state.local.feed.listOfFeedElements;
  return {
    feedState,
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(Feed);

＆＃13;

＆＃13;

＆＃13;

减速器：

＆＃13;

＆＃13;

import Immutable from 'seamless-immutable';
import { types } from 'actions/feedActions';

const initialState = Immutable({
  listOfFeedElements: [],
  sentRequestForList: false,
  receivedList: false,
});

function feedReducer(state = initialState, action) {
  switch (action.type) {
    case types.REQUEST_FEED_ELEMENTS:
      return Immutable.merge(state, {
        sentRequestForList: true,
        receivedList: false,
      });
    case types.RECEIVED_LIST:
      return Immutable.merge(state, {
        sentRequestForList: false,
        receivedList: true,
        listOfFeedElements: action.payload.listOfNotifications,
      });
    default:
      return state;
  }
}

export default feedReducer;

＆＃13;

＆＃13;

＆＃13;

佐贺：

＆＃13;

＆＃13;

import { takeLatest, put } from 'redux-saga/effects';

import { types } from 'actions/feedActions';
import feedApiCall from './feedApiCall';

export function* getFeedFlow() {
  try {
    console.log('sent request for feed');

    const listOfNotifications = feedApiCall();

    yield put({
      type: types.RECEIVED_LIST,
      payload: {
        listOfNotifications,
      },
    });
  } catch (error) {
    yield put({
      type: types.RECEPTION_ERROR,
      payload: {
        message: error.message,
        statusCode: error.statusCode,
      },
    });
  }
}

function* feedUpdateWatcher() {
  yield takeLatest(types.REQUEST_FEED_ELEMENTS, getFeedFlow);
}

export default feedUpdateWatcher;

＆＃13;

＆＃13;

＆＃13;

调度操作并修改状态（最后我有一个包含组件的列表）。但是，组件只渲染一次，因为我可以通过调用console.log来检查。

Answer 1

根组件看起来很可疑。

首先，从命名的代码和协议开始，FeedElement类看起来像React，但它在map中用作简单函数。是否看起来没有类似的东西：

Listview

其次，你返回对象elementsToDisplay = sortedElementsToDisplay .slice(0, numOfElementsToDisplay) .map(el => (<FeedElement {...el} />)); 并进一步解决const {feedState} = state.local.feed.listOfFeedElements; - 原则上这样的字段并不存在。 this.props.listOfFeedElements的一部分从哪里开始？

另外，当你被redux和saga使用时，最好通常做一个纯粹的功能部分，并且去除对与实际结构没有实际对应的componentWillMount的调用。