Как отправить модифицированный реквизит в магазин redux? - PullRequest
Новая
       71

Как отправить модифицированный реквизит в магазин redux?

0 голосов
/ 05 мая 2020
• 1000 store через действие отправки. Все, что я хочу сделать, это изменить одно поле (в архиве) с false на true в этой записи. Я знаю, что реквизит неизменяем, поэтому я не могу просто изменить его. Но как к этому подойти?

Я смутно припоминаю способ передать запись и изменить поле с помощью оператора распространения? есть какой-нибудь простой способ сделать это? Или мне нужно как-то преобразовать мой объект prop в состояние, чтобы я мог его изменить и каким-то образом передать?

Я сопоставляю свой селектор с помощью следующего ... НАЖИМАЯ, мне просто нужно передать идентификатор свойства, которое меня волнует, вместе с объектом, который я хочу заменить: 

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

The блок antd popconfirm, который вызывает onConfirm. Наверное, не страшно интересно: 

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

1 Ответ

1 голос
/ 05 мая 2020

Вы должны скопировать объект 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);
}

И в редукторе просто замените старый объект record на этот updatedRecord объект.

Надеюсь, это поможет.

...