javascript - 如何将修改后的 prop 发送到 redux store？

Question

我正在努力解决一些对我来说应该更明显的事情。

当有人点击 antd popconfirm 的“yes”选项时，它应该触发 onConfirm 函数，然后通过调度操作更新我的 redux 存储中的记录。我想做的就是将此记录中的一个字段(已存档)从 false 更改为 true。我知道 Prop 是不可变的，所以我不能只改变 Prop 。但如何解决这个问题呢？

我依稀记得使用扩展运算符传递记录和修改字段的方法？有一些简单的方法可以做到这一点吗？或者我是否需要以某种方式将我的 prop 对象转换为状态，以便我可以修改它并以某种方式传递它？

我通过以下方式映射我的选择器。据我所知，我只需要传递我关心的属性的 id 以及我希望它替换的对象:

const mapDispatchToProps = (dispatch) => ({
  archiveProperty: (id, property) => dispatch(startEditProperty(id, property))
});

调用 onConfirm 的 antd popconfirm block 。可能并不可怕有趣:

      {
        title: 'Action',
        key: 'action',
        render: (text, record) => (
          <span>
            <a>Edit</a>
            <Divider type="vertical" />
            <Popconfirm
              title="Are you sure?"
              onConfirm={() => this.confirm(record)}
              onCancel={this.cancel}
              okText="Yes"
              cancelText="No"
            >
              <a href="#">Archive</a>
            </Popconfirm>
          </span>
        ),
      },

这就是我认为我的问题所在。它有效，但我目前只传递现有记录。而不是它的修改版本。如何传递其存档字段设置为 true 的版本？

confirm = (record)  => {
  message.success('Archived');
  console.log("confirm function.. record");
  this.props.archiveProperty(record.id, record);
}

整个文件(如果有用的话)如下所示:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import selectProperties from '../selectors/properties';
import { startEditProperty } from '../actions/properties';
import { Table, Tag, Divider, Popconfirm, message } from 'antd';

export class PropertyList extends React.Component {
  constructor(){
    super();

    this.columns = [
      {
        title: 'Address',
        dataIndex: 'street',
        key: 'street',
        render: text => <a>{text}</a>,
      },
      {
        title: 'City',
        dataIndex: 'city',
        key: 'city',
      },
      {
        title: 'State',
        dataIndex: 'state',
        key: 'state',
      },
      {
        title: 'Workflow',
        key: 'workflow',
        dataIndex: 'workflow',
        sorter: (a, b) => a.workflow.length - b.workflow.length,
        sortDirections: ['descend'],
        render: workflow => {
          let color = 'geekblue';
          if (workflow === 'Inspection' || workflow === 'Maintenance' || workflow === 'Cleaning') {
            color = 'volcano';
          }
          else if (workflow === 'Rented') {
            color = 'green';
          }
          return (
            <span>
              <Tag color={color} key={workflow}>
                {workflow.toUpperCase()}
              </Tag>
            </span>
          );
        },
      },
      {
        title: 'Action',
        key: 'action',
        render: (text, record) => (
          <span>
            <a>Edit</a>
            <Divider type="vertical" />
            <Popconfirm
              title="Are you sure?"
              onConfirm={() => this.confirm(record)}
              onCancel={this.cancel}
              okText="Yes"
              cancelText="No"
            >
              <a href="#">Archive</a>
            </Popconfirm>
          </span>
        ),
      },
    ];
  }

  confirm = (record)  => {
    message.success('Archived');
    console.log(record);
    this.props.archiveProperty(record.id, record);
  }

  cancel = () => {
    message.error('Cancelled');
    console.log("cancel function..");
  }

  render() {
    return (
        <div className="content-container">
            <div className="list-body">
            {
                this.props.properties.length === 0 ? (
                <div className="list-item list-item--message">
                    <span>No properties. Add some!</span>
                </div>

                ) : (
                  <Table 
                    rowKey="id" 
                    dataSource={this.props.properties} 
                    columns={this.columns} 
                    pagination = { false } 
                    footer={() => ''} 
                  />
                )
            }
            </div>
        </div>
    )
  }
};

const mapStateToProps = (state) => {
  console.log("PropertyList mapStateToProps..");
  console.log(state);
  return {
    properties: selectProperties(state.properties, state.filters)
  };
};

const mapDispatchToProps = (dispatch) => ({
  archiveProperty: (id, property) => dispatch(startEditProperty(id, property))
});

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

Answer 1

您应该复制 record 对象，并将复制对象中的一个字段(已存档)从 false 更改为 true。

在您的confirm 方法中尝试此操作。

confirm = (record)  => {
  message.success('Archived');
  console.log("confirm function.. record");

  // create a new modified object
  const updatedRecord = Object.assign({}, record, {archived: true});

  //now pass this updatedRecord object as a new record to store
  this.props.archiveProperty(record.id, updatedRecord);
}

在reducer中，只需用这个updatedRecord对象替换旧的record对象即可。

希望有帮助。