Javascript 如何使用react和redux处理文件上载？

我在尝试在react redux应用程序中实现文件上载程序时遇到了一些问题。 到目前为止，我一直以这种方式处理所有其他输入：

所有输入都有一个名称和一个值。当它们被更改时，它们调用相同的函数

此函数分派一个操作，因此在组件的容器中有：

onInputChange: (name, value) => {
  dispatch(inputValueChange(name, value));
}

这是操作创建者：

export const inputValueChange = (name, value) => ({
  type: INPUT_VALUE_CHANGE,
  name,
  value,
});

现在在减速器中，有一个与此动作相对应的情况：

case INPUT_VALUE_CHANGE:
  return {
    ...state,
    [action.name]: action.value,
  };

这适用于我输入的所有文本类型和选择元素。 如果我使用相同的操作发送名称“image”（对应于状态中元素的名称）和值e.target.files[0]，我可以通过reducer中的console.log查看预期信息

但是这个州没有更新，我不明白为什么。我怀疑这可能是因为我试图更新状态的一个元素，它实际上是一个对象。但这种方法适用于状态元素数组。 我试图给状态一个null的初始值。在这种情况下，状态被更新，图像是一个空对象

那么我如何才能正确地更新我的状态呢

在此之后，我将使用所有这些元素将数据发布到我的API。在调用API之前，我计划执行以下操作：

const bodyFormData = new FormData();
bodyFormData.append('image', image);  //image is the object which I put in the state
// Then i will do a post request on /api/upload by giving it bodyFormData

---

这听起来可以吗？

我解决了我的问题。这相当棘手

解决方案是在我将console.log（映像）返回给组件时执行它。这将使我能够看到图像的信息是从redux状态提供给组件的。实际上，状态已正确更新，但Redux开发工具无法读取此类对象，因此它显示一个空对象，而对象不是空的

很高兴知道