如何将数据添加到redux存储的数组中，该数组是动态创建的？

import { createAction } from '@reduxjs/toolkit';

const addData = createAction('ADD_DATA');

export { addData };

import { produce } from 'immer';
import { addData } from './actions';

const initialState = {
  data: []
};

const reducer = produce((state, action) => {
  switch (action.type) {
    case addData.type:
      state.data.push(action.payload);
      break;
    default:
      break;
  }
}, initialState);

export default reducer;

import { useSelector, useDispatch } from 'react-redux';
import { addData } from './actions';

const MyComponent = () => {
  const dispatch = useDispatch();
  const data = useSelector((state) => state.data);

  const handleAddData = (newData) => {
    dispatch(addData(newData));
  };

  return (
    <div>
      {/* 显示当前数组中的数据 */}
      {data.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
      
      {/* 添加新数据按钮 */}
      <button onClick={() => handleAddData('New Data')}>
        添加数据
      </button>
    </div>
  );
};

export default MyComponent;