在react-redux中处理编辑操作

function editItem(item) {
  return {
    type: 'EDIT_ITEM',
    payload: item
  };
}

function itemsReducer(state = [], action) {
  switch (action.type) {
    case 'EDIT_ITEM':
      return state.map(item => {
        if (item.id === action.payload.id) {
          return {
            ...item,
            ...action.payload
          };
        }
        return item;
      });
    default:
      return state;
  }
}

import { connect } from 'react-redux';
import { editItem } from './actions';

class ItemEditor extends React.Component {
  // 编辑操作的处理函数
  handleEdit = () => {
    const { item, editItem } = this.props;
    // 执行编辑操作
    editItem({ id: item.id, name: 'New Name' });
  }

  render() {
    // 渲染编辑操作的按钮等界面
    return (
      <button onClick={this.handleEdit}>Edit</button>
    );
  }
}

// 将Redux的state和action映射到组件的props
const mapStateToProps = (state) => {
  return {
    // 这里可以根据需要选择state中的特定数据
    item: state.items.find(item => item.id === 'someId')
  };
};

const mapDispatchToProps = {
  editItem
};

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