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

import { combineReducers } from 'redux';
import { DRAG_DROP_ACTION_TYPE } from './constants'; // 假设有一个包含常量的文件

// 其他必要的导入语句

const initialState = {
  draggedData: null,
  // 其他与拖放相关的状态
};

const dragAndDropReducer = (state = initialState, action) => {
  switch (action.type) {
    case DRAG_DROP_ACTION_TYPE.SET_DRAGGED_DATA:
      return {
        ...state,
        draggedData: action.payload,
      };
    // 其他与拖放相关的action类型
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  dragAndDrop: dragAndDropReducer,
  // 其他reducer
});

export default rootReducer;

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

import { connect } from 'react-redux';

const MyComponent = ({ draggedData, setDraggedData }) => {
  // 使用draggedData和setDraggedData进行操作

  return (
    // 组件的JSX代码
  );
};

const mapStateToProps = (state) => ({
  draggedData: state.dragAndDrop.draggedData,
});

const mapDispatchToProps = (dispatch) => ({
  setDraggedData: (data) => dispatch({ type: DRAG_DROP_ACTION_TYPE.SET_DRAGGED_DATA, payload: data }),
});

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);