使用Redux更新React中数组中的嵌套对象

// Redux中的action类型
const UPDATE_NESTED_OBJECT = 'UPDATE_NESTED_OBJECT';

// Redux中的action创建函数
const updateNestedObject = (index, updatedObject) => {
  return {
    type: UPDATE_NESTED_OBJECT,
    index,
    updatedObject
  };
};

// Redux的reducer
const initialState = {
  nestedObjects: []
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case UPDATE_NESTED_OBJECT:
      const updatedObjects = [...state.nestedObjects];
      updatedObjects[action.index] = action.updatedObject;
      return {
        ...state,
        nestedObjects: updatedObjects
      };
    default:
      return state;
  }
};

// React组件
import React from 'react';
import { connect } from 'react-redux';

class MyComponent extends React.Component {
  // ...
  
  handleUpdateNestedObject = (index, updatedObject) => {
    this.props.updateNestedObject(index, updatedObject);
  }
  
  render() {
    // ...
  }
}

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

const mapDispatchToProps = (dispatch) => {
  return {
    updateNestedObject: (index, updatedObject) => dispatch(updateNestedObject(index, updatedObject))
  };
};

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