React 和 redux 工具包：如何添加从拖放事件中获取数据的 reducer答案

【问题标题】：React and redux toolkit: how to add reducer that gets data from a drag and drop eventReact 和 redux 工具包：如何添加从拖放事件中获取数据的 reducer
【发布时间】：2021-06-22 13:19:36
【问题描述】：

对 React 和 redux 非常陌生。我正在尝试向我的 React 应用程序添加文件拖放功能，但在使用 redux 时遇到了问题工具包的 createSlice 函数。

我不断收到“TypeError：无法读取未定义的属性“fileList”。我认为这是因为我在下面的 searchSlice.js 中弄乱了 addFilesToList 减速器。

任何帮助将不胜感激。请参阅下面的代码：

searchSlice.js

import { createSlice } from '@reduxjs/toolkit'


export const searchSlice = createSlice({
    name:'search',
    initialState: {
        fileList: [],
        inDropZone: false, 
         
    },

    reducers: {

        addToDropZone: (state) => {
            return state.inDropZone = true
        }
        ,
        
        addFilesToList: (state, e) => {
            return state.fileList = [...e.dataTransfer.files]
        }
    }
})

export const { addToDropZone, addFilesToList } = searchSlice.actions

export default searchSlice.reducer

DragDrop.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { addToDropZone, addFilesToList } from './searchSlice.js'
import DragArea from './DragArea.js'
import TableArea from './TableArea.js'

//import img from './components/images/drag.PNG'//


const DragDrop = (props) => {

    const files = useSelector((state) => state.searchSlice.fileList)
    const inDropZone = useSelector((state) => state.searchSlice.inDropZone)
    const dispatch = useDispatch()
    //const { data, dispatch } = props//


    const handleDragEnter = (e) => {
        e.preventDefault();
        e.stopPropagation();

        dispatch(addToDropZone());
    };
    const handleDragLeave = (e) => {
        e.preventDefault();
        e.stopPropagation();
    };
    const handleDragOver = (e) => {
        e.preventDefault();
        e.stopPropagation();
        e.dataTransfer.dropEffect = 'copy';
        dispatch(addToDropZone());
    };
    const handleDrop = (e) => {
        e.preventDefault();
        e.stopPropagation();

        dispatch(addFilesToList());
        dispatch(addToDropZone());

        if (files && files.length > 0) {
            const existingFiles = files.map(f => f.name)
            files = files.filter(f => !existingFiles.includes(f.name))


        }

    };


    if (inDropZone === true && files.length === 0) {
        return(
                <div className = "drag-and-drop" 
                    onDrop={handleDrop}
                    onDragOver= {handleDragOver}
                    onDragEnter={handleDragEnter}
                    onDragLeave={handleDragLeave}>
                    <DragArea  />
                </div>
        )
    } else {
        return(
            <div className = "table-area" 
                onDrop={handleDrop}
                onDragOver= {handleDragOver}
                onDragEnter={handleDragEnter}
                onDragLeave={handleDragLeave}>
                <TableArea data = {files} />
        </div>
        )
    } 
}


export default DragDrop;

【问题讨论】：

标签： javascript reactjs react-redux redux-toolkit redux-reducers

【解决方案1】：

addFilesToList reducer 中的 e 类型是 PayloadAction。这意味着它的形状是这样的：

{
  type: “search/addFilesToList”,
  payload: valueYouPassToActionCreator
}

valueYouPassToActionCreator 是您在调度它时传递给 addFilesToList 操作创建器的任何内容，例如：

dispatch(addFilesToList(valueYouPassToActionCreator))

然而，你正在做：

dispatch(addFilesToList())

这意味着您的 PayloadAction 上的 .payload 属性未定义。简而言之，您需要将一些内容传递给动作创建者。

【讨论】：