Question

新的反应/还原。想知道为什么我的组件没有在触发的动作上刷新。还不确定减速器是否是操纵商店的好地方，但是它是纯净的，因此应该可以使用。

发生的事情是触发了操作并更新了存储。但是点击的项目没有更新（道具更新应在其上添加类added）

组件：

通过ID引用rcm_data来切换类added，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 });

异径管：

复制状态（出于预防目的），递增group_data的created_count属性，并更改操作引用的rcm_data的add属性。有效负载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复制对象（group_data和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）并对其进行突变。

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

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

{{1}}

mapStateToProps在更改时不更新组件

1 个答案: