在react-redux reducer的任何操作后更新状态数组

// 定义初始状态数组
const initialState = [];

// 定义reducer函数
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      // 在状态数组末尾添加新的元素
      return [...state, action.payload];
    case 'REMOVE_ITEM':
      // 根据索引删除状态数组中的元素
      const newState = [...state];
      newState.splice(action.payload, 1);
      return newState;
    case 'UPDATE_ITEM':
      // 根据索引修改状态数组中的元素
      const updatedState = [...state];
      updatedState[action.payload.index] = action.payload.item;
      return updatedState;
    default:
      return state;
  }
};

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

// 在组件中使用状态数组
const MyComponent = () => {
  const items = useSelector(state => state); // 获取状态数组
  const dispatch = useDispatch();

  const addItem = () => {
    dispatch({ type: 'ADD_ITEM', payload: 'New Item' }); // 添加新元素到状态数组
  };

  const removeItem = (index) => {
    dispatch({ type: 'REMOVE_ITEM', payload: index }); // 根据索引删除状态数组中的元素
  };

  const updateItem = (index, newItem) => {
    dispatch({ type: 'UPDATE_ITEM', payload: { index, item: newItem } }); // 根据索引修改状态数组中的元素
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeItem(index)}>Remove</button>
            <button onClick={() => updateItem(index, 'Updated Item')}>Update</button>
          </li>
        ))}
      </ul>
    </div>
  );
};