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

Question

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

我遇到的问题是，当我尝试使用 Object.assign() 或 JSON.parse(JSON.stringify(obj)) 方法 'copy' 一个 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 对象上。而是将它们作为兄弟姐妹存储在父对象上：

// 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];

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

Extending or cloning File Web API object in Redux reducer to support other properties

javascript

fileapi

ecmascript-6

reactjs

redux