javascript - 如何在redux中存储图像，图像返回一个空对象

Question

我想将图像存储到 redux 商店，但它仍然给我空对象。

当我 console.log 图像时，它具有以下规范

这是我的代码

    onClickSave = () => {
        if (this.editor) {
            // If you want the image resized to the canvas size (also a HTMLCanvasElement)
            const canvas = this.editor.getImageScaledToCanvas();

            canvas.toBlob((blob) => {
                const file = new File([blob], "my-file", {
                    type: "image/png",
                });

                console.log(file) // return the object in the picture above
                this.props.handlePicture(file); // trying store to redux, but failed 
            });
        }
    };

这是我的行动

const mapDispatchToProps = (dispatch) => {
    return {
        handlePicture: file => {
            return dispatch({type: PRODUCT_ADD_PICTURE, payload: file })
        }
    }
} 

我的减速机

// import things 

const initialState = {
    name: "",
    description: "",
    picture: null,
    quantity: 0,
};
const productReducer = (state = initialState, action) => {
    const payload = action.payload
    switch (action.type) {
        // other code
        case PRODUCT_ADD_PICTURE: {
            console.log('here paylaod', payload)
            return { ...state, picture: payload };
        }
       // other code
        default:
            return state;
    }
};

这是减速器中的日志结果。

通常当我将它存储到 redux 时，它会给我一些字符串，并准备将其发送到服务器。为什么返回是空的？任何帮助，将不胜感激。

标签： javascriptreactjs