React Redux如何将数据添加到对象的数组

// 定义添加数据的action类型
const ADD_DATA = 'ADD_DATA';

// 定义添加数据的action创建函数
const addData = (data) => {
  return {
    type: ADD_DATA,
    payload: data
  };
};

// 定义初始状态
const initialState = {
  data: []
};

// 定义reducer
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_DATA:
      return {
        ...state,
        data: [...state.data, action.payload]
      };
    default:
      return state;
  }
};

import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

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

// 定义组件
const MyComponent = ({ data, addData }) => {
  const handleClick = () => {
    addData('new data');
  };

  return (
    <div>
      <button onClick={handleClick}>Add Data</button>
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

// 将state映射到组件的props
const mapStateToProps = (state) => {
  return {
    data: state.data
  };
};

// 将dispatch映射到组件的props
const mapDispatchToProps = (dispatch) => {
  return {
    addData: (data) => dispatch(addData(data))
  };
};

// 使用connect函数连接组件与store
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent);

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