如何在react中从reducer状态添加和删除项

function reducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return [...state, action.payload];
    case 'REMOVE_ITEM':
      return state.filter(item => item !== action.payload);
    default:
      return state;
  }
}

import React, { useReducer } from 'react';

function App() {
  const initialState = [];
  const [state, dispatch] = useReducer(reducer, initialState);

  const addItem = () => {
    dispatch({ type: 'ADD_ITEM', payload: 'New Item' });
  };

  const removeItem = () => {
    dispatch({ type: 'REMOVE_ITEM', payload: 'New Item' });
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <button onClick={removeItem}>Remove Item</button>
      <ul>
        {state.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;