How to dispatch a modified prop to redux store?

Question

I'm struggling with something that should be more obvious to me.

when someone clicks on a antd popconfirm's "yes" option, it's supposed to trigger the onConfirm function and then update a record in my redux store via a dispatch action. All I want to do is to change one field (archived) from false to true in this record. I know that props are immutable so i can't just change the prop. But how to approach this?

I vaguely recall a way to pass a record on and modify a field using a spread operator? is there some easy way to do this? Or do i need to somehow convert my prop object to state so i can modify it and pass it on somehow?

I map my selector via the following.. AFAIK I just need to pass the id of the property i care about along with the object that i want it to replace:

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

The antd popconfirm block that calls onConfirm. Probably not terrible interesting:

      {
        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>
        ),
      },

Here is where I think my problem is. It works but i am currently only passing the existing record in. Not a modified version of it. How to pass a version of it that has it's archived field set to true?

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

The entire file if it's useful looks like this:

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

You should copy the record object and change its one field (archived) from false to true in copied object.

Try this in your confirm method.

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

And in reducer just replace old record object with this updatedRecord object.

Hope it helps.