javascript - 在 Redux reducer 中扩展或克隆 File Web API 对象以支持其他属性

Question

我正在尝试保留用户已选择上传的文件数组。每个文件都是一个 File目的。我想向它添加其他属性，例如“进度”和“状态”，以便我可以在用户开始上传过程时向他们展示这些数据。

我遇到的问题是，当我尝试使用 Object.assign() 或 JSON.parse(JSON.stringify(obj)) 来“复制”一个 File 对象时 方法，我只会取回我自己设置的属性，而不是对象固有的值。

这是我尝试使用 Object.assign() 的一个示例:

Object.assign({}, state, {
    files: [
        ...state.files.slice(0, payload.index),
        Object.assign({}, state.files[payload.index], {
            status: 'UPLOADING',
            progress: 0
        }),
        ...state.files.slice(payload.index + 1)
    ]
})

可以理解，这给我带来了各种各样的问题......

跟踪文件并能够以适合 Redux 的方式扩展其属性的好方法是什么？

提前感谢大家。

Answer 1

只是不要尝试将您的额外属性存储在 File 对象上。而是将它们作为 sibling 存储在父对象上:

// INIT case
return {
    ...state,
    files: [
        ...state.files,
        { fileObject, status: "INITIAL" }
    ]
};

// UPDATE case
return {
    ...state,
    files: [
        ...state.files.slice(0, payload.index),
        { ...state.files[payload.index], status: "UPLOADING", progress: 0 },
        ...state.files.slize(payload.index + 1)
    ]
};

在这个方案中:

// fileObject is the File
const { fileObject, status, progress } = state.files[2];