mapStateToProps не обновляет компонент при изменении

Question

Новый, чтобы реагировать / избыточный.Интересно, почему мой компонент не обновляется при запущенном действии.Также не уверен, является ли редуктор хорошим местом для манипулирования хранилищем, но он чистый, поэтому он должен работать.

Что происходит, когда действие запускается и хранилище обновляется.Но выбранный элемент не обновляется (реквизиты должны добавить к нему класс added)

Компонент:

Ссылка на rcm_data по Id для переключения класса added,действие onClick fire

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

Редуктор:

Состояние копирования (только предосторожность), увеличьте свойство Added_count для group_data и измените свойство add для rcm_data, на которое ссылается действие.Идентификатор полезной нагрузки, вернуть новое состояние.Здесь все кажется чистым

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

Ваш редуктор копирует объекты (rcm_data и group_data) и мутирует их.

Redux сравнивает поверхностно - при использовании тех же объектов refs нет разницы, тогда нет обновления / перерисовки.

Просто создайте новый подобъект, например:

    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