使用createSlice中的reducer从处于redux状态的数组中删除元素

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

const itemsSlice = createSlice({
  name: 'items',
  initialState: [],
  reducers: {
    removeItem: (state, action) => {
      const index = state.findIndex(item => item.id === action.payload);
      if (index !== -1) {
        state.splice(index, 1);
      }
    },
  },
});

export const { removeItem } = itemsSlice.actions;
export default itemsSlice.reducer;

import { configureStore } from '@reduxjs/toolkit';
import itemsReducer from './itemsSlice';

const store = configureStore({
  reducer: {
    items: itemsReducer,
  },
});

export default store;

import { useDispatch } from 'react-redux';
import { removeItem } from './itemsSlice';

const ItemList = ({ items }) => {
  const dispatch = useDispatch();

  const handleRemoveItem = (itemId) => {
    dispatch(removeItem(itemId));
  };

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
          <button onClick={() => handleRemoveItem(item.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
};

export default ItemList;