时间戳

首页 > 解决方案 > mapStateToProps 不会在更改时更新组件

javascript - mapStateToProps 不会在更改时更新组件

问题描述

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

发生的事情是触发动作并更新存储。但是点击的项目没有更新（道具更新应该添加类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 的 added_count 属性并更改操作引用的 rcm_data 的添加属性。有效载荷 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;

标签： javascriptreactjsredux

解决方案

您的 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

推荐阅读