在Redux的react中更新数组中对象的值

// reducer.js

const initialState = {
  items: [
    { id: 1, name: 'Item 1', value: 10 },
    { id: 2, name: 'Item 2', value: 20 },
    { id: 3, name: 'Item 3', value: 30 }
  ]
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_ITEM':
      return {
        ...state,
        items: state.items.map(item => {
          if (item.id === action.payload.id) {
            return {
              ...item,
              value: action.payload.value
            };
          }
          return item;
        })
      };
    default:
      return state;
  }
};

export default reducer;

// actions.js

export const updateItem = (id, value) => ({
  type: 'UPDATE_ITEM',
  payload: { id, value }
});

// MyComponent.js

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

const MyComponent = ({ items, updateItem }) => {
  const handleUpdate = (id, value) => {
    updateItem(id, value);
  };

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>
          <span>{item.name}: </span>
          <input
            type="number"
            value={item.value}
            onChange={e => handleUpdate(item.id, e.target.value)}
          />
        </div>
      ))}
    </div>
  );
};

const mapStateToProps = state => ({
  items: state.items
});

const mapDispatchToProps = {
  updateItem
};

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