React and redux工具包:如何添加从拖放事件中获取数据的reducer

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

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

// itemsSlice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  list: ['Item 1', 'Item 2', 'Item 3'],
};

export const itemsSlice = createSlice({
  name: 'items',
  initialState,
  reducers: {
    updateOrder: (state, action) => {
      const { draggedIndex, targetIndex } = action.payload;
      const [draggedItem] = state.list.splice(draggedIndex, 1);
      state.list.splice(targetIndex, 0, draggedItem);
    },
  },
});

export const { updateOrder } = itemsSlice.actions;

// Item.js
import React from 'react';
import { useDispatch } from 'react-redux';
import { updateOrder } from './itemsSlice';

const Item = ({ item, index }) => {
  const dispatch = useDispatch();

  const handleDragStart = (e) => {
    e.dataTransfer.setData('text/plain', index);
  };

  const handleDrop = (e) => {
    e.preventDefault();
    const draggedIndex = e.dataTransfer.getData('text/plain');
    dispatch(updateOrder({ draggedIndex, targetIndex: index }));
  };

  const handleDragOver = (e) => {
    e.preventDefault();
  };

  return (
    <div
      draggable
      onDragStart={handleDragStart}
      onDrop={handleDrop}
      onDragOver={handleDragOver}
    >
      {item}
    </div>
  );
};

export default Item;

// App.js
import React from 'react';
import { useSelector } from 'react-redux';
import Item from './Item';

const App = () => {
  const items = useSelector((state) => state.items.list);

  return (
    <div>
      {items.map((item, index) => (
        <Item key={index} item={item} index={index} />
      ))}
    </div>
  );
};

export default App;