在React / Redux中添加/更新深度对象数组

// actions.js

export const addOrUpdateArray = (array) => {
  return {
    type: 'ADD_OR_UPDATE_ARRAY',
    payload: array
  };
};

// reducers.js

const initialState = {
  deepArray: []
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_OR_UPDATE_ARRAY':
      // 使用深度复制的方式来添加或更新深度对象数组
      const newArray = JSON.parse(JSON.stringify(state.deepArray));
      action.payload.forEach((item) => {
        const index = newArray.findIndex((obj) => obj.id === item.id);
        if (index !== -1) {
          // 更新已存在的对象
          newArray[index] = item;
        } else {
          // 添加新的对象
          newArray.push(item);
        }
      });
      return {
        ...state,
        deepArray: newArray
      };
    default:
      return state;
  }
};

export default reducer;

// YourComponent.js

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

class YourComponent extends React.Component {
  // ...

  handleAddOrUpdateArray = () => {
    const deepArray = [
      { id: 1, name: 'Object 1' },
      { id: 2, name: 'Object 2' },
      // ...
    ];
    this.props.addOrUpdateArray(deepArray);
  };

  render() {
    // ...
  }
}

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

const mapDispatchToProps = {
  addOrUpdateArray
};

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