javascript - mapStateToProps 未在更改时更新组件

Question

react/redux 新手。想知道为什么我的组件在触发操作时没有刷新。也不确定 reducer 是否是操作存储的好地方，但它是纯粹的，所以它应该可以工作。

发生的情况是操作被触发并且存储被更新。但是点击的项目没有更新( Prop 更新应该添加类add到它)

组件:

通过 ID 引用 rcm_data 来切换类添加，onClick 触发操作

import React, { Component } from "react";
import { connect } from "react-redux";
import { addRateCard } from "../actions";

import "./RcmEditor.css";

class RcmEditor extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <table className="slds-table slds-table--cell-buffer slds-table--bordered">
        <thead>
          <tr>
            <th>Rate Card Name</th>
          </tr>
        </thead>
        <tbody>
          {group.rateCardIds.map(rcId => {
            return (
              <tr
                className={
                  "ed-group-rc " +
                  (this.props.rcm_data[rcId].added ? "added" : "")
                }
                key={rcId}
                onClick={() =>
                  this.props.addRateCard(this.props.rcm_data[rcId])
                }
              >
                <td colSpan="100">{this.props.rcm_data[rcId].Name}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    );
  }
}

const mapDispatchToProps = {
  addRateCard
};

const mapStateToProps = state => {
  return { rcm_data: state.rcm_data, group_data: state.group_data };
};

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

操作:

const ADD_RATE_CARD = "ADD_RATE_CARD";

export const addRateCard = rateCard => ({ type: ADD_RATE_CARD, payload: rateCard });

reducer :

复制状态(只是预防措施)，增加group_data的added_count属性并更改操作引用的rcm_data的added属性。 Payload Id，返回一个新的状态。这里的一切都显得纯净

const initialState = {
    rcm_data: {},
    group_data: {},
};

const rootReducer = (state = initialState, action) => {
    case "ADD_RATE_CARD":

        let _state = { ...state };
        let rateCard = action.payload;

        _state.group_data[rateCard.GroupName].added_count++;
        _state.rcm_data[rateCard.Id].added = true;

        let data = {
            rcm_data: _state.rcm_data,
            group_data: _state.group_data
        };

        return { ...state, rcm_data: _state.rcm_data, group_data: _state.group_data };
    default:
        return state;
   }
};

export default rootReducer;

Answer 1

你的reducer复制对象(rcm_data和group_data)并改变它们。

Redux 比较浅 - 使用相同的对象引用没有区别，然后没有更新/重新渲染。

只需创建一个新的子对象，例如:

    let data = {
        rcm_data: {...state.rcm_data},
        group_data: {...state.group_data}
    };
    data.group_data[rateCard.GroupName].added_count++;
    data.rcm_data[rateCard.Id].added = true;
    return data