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

在React和Redux工具包中处理拖放事件并更新状态，通常涉及以下几个步骤：

基础概念

Redux Toolkit: 是Redux的官方工具集，旨在简化Redux的配置和使用。 Reducer: 是一个纯函数，接收当前状态和一个动作（action），然后返回新的状态。 Drag and Drop (DnD): 是一种用户界面交互模式，允许用户通过拖动元素到另一个位置来移动或复制它们。

类型与应用场景

应用场景: 在需要用户通过拖放来重新排列列表项、上传文件或进行数据管理的应用中非常有用。
类型: 可以是简单的列表排序，也可以是复杂的组件布局编辑器。

示例代码

以下是一个简单的例子，展示如何在React和Redux Toolkit中添加一个处理拖放事件的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;