Redux + React如何在充满对象的数组中只更改一个元素值？我有可以工作的应用程序，只是想确保我做得正确

// 定义reducer
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;
  }
};

// 创建store
const store = createStore(reducer);

// React组件
class MyComponent extends React.Component {
  handleUpdateItem = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'UPDATE_ITEM',
      payload: {
        id: 2,
        value: 50
      }
    });
  };

  render() {
    const { items } = this.props;
    return (
      <div>
        {items.map(item => (
          <div key={item.id}>
            {item.name}: {item.value}
          </div>
        ))}
        <button onClick={this.handleUpdateItem}>更新元素</button>
      </div>
    );
  }
}

// 将Redux的状态和操作绑定到组件的props上
const mapStateToProps = state => ({
  items: state.items
});

const mapDispatchToProps = dispatch => ({
  dispatch
});

// 使用connect函数将Redux的状态和操作绑定到组件上
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent);

// 渲染组件
ReactDOM.render(
  <Provider store={store}>
    <ConnectedComponent />
  </Provider>,
  document.getElementById('root')
);