在调度将文件添加到 Redux 存储的操作后，我无法访问名为“Files”的 React 组件中的文件数组

Question

我无法访问名为“Files”的组件中的文件数组

调度动作： 该函数处理选择文件时的更改事件。它从文件中提取元数据，并使用此元数据调度一个操作 PushFile 以将其添加到 Redux 存储中。

const handleFileChange = (e) => {
        const file = e.target.files[0]

        if (file) {
            const fileMetaData = {
                name: file.name,
                size: file.size,
                type: file.type,
                lastModified: file.lastModified
            }

            dispatch(pushFile(fileMetaData))

            // optionally we can upload to server from here ...
        }

}

Redux 存储配置： 此代码使用 Redux Toolkit 中的 configureStore 配置 Redux 存储。它结合了reducer，其中fileReducer负责管理文件相关的状态。

import { configureStore } from "@reduxjs/toolkit";
import fileReducer from './fileSlice'

const store = configureStore({
    reducer: {
        fileUpload: fileReducer
    }
})

export default store;

文件缩减器： 该文件定义了用于管理文件的 Redux 存储状态的一部分。 PushFile 减速器将文件添加到状态下的文件数组中。

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

const initialState = {
    files: []
}

const fileSlice = createSlice({
    name: "file",
    initialState,
    reducers: {
        pushFile: (state, action) => {
            console.log("Action payload: ", action.payload);
            state.files.push(action.payload)
            console.log("Updated State:", [...state.files]);
        }
    }
})

export const { pushFile } = fileSlice.actions
export default fileSlice.reducer

访问文件组件中的文件： 此代码片段使用 useSelector 挂钩从 Redux 存储状态中提取文件数组。它使用 useEffect 挂钩记录对文件数组的更改。

const files = useSelector((state) => state.file?.files || []);

useEffect(() => {
    console.log("Files changed:", files);
}, [files]);

以下是我尝试上传文件时的输出： 输出

问题： 尽管分派了 PushFile 操作，文件组件中的文件数组仍为空或未更改。

预期输出： Files 组件中的 files 数组应包含分派 pushFile 操作后新添加的文件元数据。

Answer 1

问题

fileReducer

状态存储在

fileUpload

键下

const store = configureStore({
  reducer: {
    fileUpload: fileReducer
  }
});

所以您选择的状态不正确：

const files = useSelector((state) => state.file?.files || []);

此处

state.file

未定义。

解决方案建议

更新选择器函数以选择有效状态。

示例：

const files = useSelector((state) => state.fileUpload.files);