Redux 更新 state （在减速器中），但 React 组件不会重新渲染？

Question

这很奇怪，因为在我的减速器中，我确保我没有变异 state； 此特定问题的常见问题。 但是，我仍然不断收到这个问题。 关于应用程序的初始加载（使用 npm 启动）。 在下面的照片中，您可以看到我在 return 语句之前 console.log 每个组件作为测试以查看组件是否呈现。 但是尽管 state 被更新，组件永远不会重新渲染....（我相信容器设置正确并且组件被调用。）

全部礼品展示

import OneGiftDisplay from './OneGiftDisplay.jsx';

const AllGiftsDisplay = (props) => {
  console.log("LOADING");
  let individualGifts = [];
  for(let i = 0; i < props.giftList.length; i++) {
    individualGifts.push(
      <OneGiftDisplay
        addGift = {props.addGift}
        updatedGiftMessage = {props.updateGiftMessage}
        setNewMessage = {props.setNewMessage} 
        totalVotes = {props.totalVotes}
      />
    )
  }  
  // let list = [<OneGiftDisplay/>, <OneGiftDisplay/>]
  return (
    <div className = "displayAllGifts">

      {/* {console.log("~~~giftlist length", props.giftList.length)} */}
      {individualGifts} 
      {/* {list} */}
    </div>
  )
};

export default AllGiftsDisplay;

礼品减少器

import * as types from '../constants/actionTypes.js';

const initialState = {
    giftList: [],
    lastGiftId: 10000,
    totalVotes: 0,
    newMessage: ''
};

const giftReducer = (state=initialState, action) => {
  // let giftList;
  // let setMessage;

  switch(action.type) {
    case types.ADD_GIFT:
      let stateCopy = { ...state }; // shallow copy

      // create the new gift object structure.
      const giftStructure = {
        // lastGiftId: stateCopy.lastGiftId,
        newMessage: stateCopy.newMessage,
        totalVotes: 0
      };

      // push the new gift onto the list.
      stateCopy.giftList.push(giftStructure);
      // console.log("giftList: ", stateCopy.giftList);s
      // return updated state
      return {
        ...stateCopy,
        newMessage: ''
      }

    case types.SET_MESSAGE:
      return {
        ...state, newMessage: action.payload,
      }

    case types.ADD_VOTE:

    case types.DELETE_GIFT:

    default:
      return state;
  }
};

export default giftReducer;

列表容器

import React, { Component } from 'react';
import { connect } from 'react-redux';

// import actions from action creators file
import * as actions from '../Actions/actions';
import AllGiftsDisplay from '../Components/AllGiftsDisplay.jsx';
import GiftCreator from '../Components/GiftCreator';

const mapStateToProps = (state) => ({
    lastGiftId: state.gifts.lastGiftId,
    giftList : state.gifts.giftList,
    totalVotes: state.gifts.totalVotes,
    setNewMessage: state.gifts.setNewMessage
});

//pass in text into update
const mapDispatchToProps =  dispatch => ({
    updateGiftMessage: (e) => { 
        console.log(e.target.value);
        dispatch(actions.setMessage(e.target.value));
    },
    addGift: (e) => {
        e.preventDefault();
        console.log("actions: ", actions.addGift);
        dispatch(actions.addGift());
    }
});
  
  class ListContainer extends Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      return(
        <div className="All-Lists">
            <h1>LIST CONTAINER!</h1>
                <AllGiftsDisplay giftList = {this.props.giftList} addGift={this.props.addGift} setNewMessage={this.props.setNewMessage} totalVotes = {this.props.totalVotes} lastGiftId = {this.props.lastGiftId}/>
                <GiftCreator setNewMessage={this.props.setNewMessage} updateGiftMessage={this.props.updateGiftMessage} addGift={this.props.addGift}/>
        </div>
      );
    }
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(ListContainer);

Answer 1

秘诀是避免改变giftList 。

const giftReducer = (state=initialState, action) => {
  // let giftList;
  // let setMessage;

  switch(action.type) {
    case types.ADD_GIFT:

      // create the new gift object structure.
      const giftStructure = {
        // lastGiftId: stateCopy.lastGiftId,
        newMessage: stateCopy.newMessage,
        totalVotes: 0
      };

      return {
        ...state,
        giftList: [...state.giftList, giftStructure],
        newMessage: ''
      }

    case types.SET_MESSAGE:
      return {
        ...state, newMessage: action.payload,
      }

    case types.ADD_VOTE:

    case types.DELETE_GIFT:

    default:
      return state;
  }
};

为了更好地理解为什么不需要改变数组，请考虑以下示例：

const arr = [1, 2, 3];
const b = { a: arr };
const c = { ...b };
c.a.push(4);
console.log(arr === c.a); // outputs true