redux state 通过调度 Blob 获取空对象答案

【问题标题】：redux state takes empty object by dispatching Blobredux state 通过调度 Blob 获取空对象
【发布时间】：2021-08-19 11:04:30
【问题描述】：

我目前正在做一个项目，我应该记录用户的声音，然后将其发送到服务器。这个项目是在 ReactJS 和 Redux 中完成的。我可以正确录制声音，但是当我发送这个 blob 以更新商店时，它需要空对象。

我的记录器组件

const RecorderC = () => {

  const dispatch = useDispatch();

  const handleStop = (audioData) => {
    console.log(audioData);
    dispatch(sendAudioData(audioData));
  };

  return (
    <div>
      <AudioReactRecorder
        state={isRecording}
        onStop={(audioData) => handleStop(audioData)}
      />

      <div className="btns-box">
        <button
          className="btn btn-danger"
          onClick={() => dispatch(startRecordAction())}
        >
          Start
        </button>
        <button
          className="btn btn-primary"
          onClick={() => dispatch(stopRecordAction())}
        >
          Stop
        </button>
      </div>
    </div>
  );
};

我的记录器操作：

export const sendAudioData = (audioData) => {
  return {
    type: SEND_AUDIO_DATA,
    payload: audioData,
  };
};

我的recorderReducer：

const recorderReducer = (state = initialState, action) => {
  switch (action.type) {
    case SEND_AUDIO_DATA:
      return {
        ...state,
        blob: action.payload,
      };

    default:
      return state;
  }
};

这些操作运行良好。我的意思是商店更新了初始状态，但我的状态中 blob 的值接收到空 blob。下图就是为了证明这一点。

值得一提的是，根据有效负载的控制台日志记录，除了存储接收到空对象之外，一切都很好。

【问题讨论】：

标签： reactjs redux blob dispatch

【解决方案1】：

You should not put non-serializable values into the Redux store，Blob 绝对是不可序列化的值。

实际的 data 可能正确存在，但 DevTools 根本无法显示该值，因为 A）它是 Blob 并且没有任何可读性，并且 B）该值可以'没有被正确序列化以在 DevTools 中显示。

这实际上是我们告诉用户不要这样做的一个很好的例子:)

【讨论】：

我检查并发现问题只是 Redux devtools 显示它的方式。因此，您是对的：“实际数据可能正确存在”。万分感谢。我把它作为一个 blob 放在商店里，我想知道这只是一种不好的做法还是完全错误的。因为我想将商店的这件商品发送到服务器。服务器是否可能无法正确接收？如果不是我应该如何序列化它？
这里最大的问题在于 DevTools。它们无法显示数据，并且如果您要使用“时间旅行调试”功能，则在重新创建状态时不会保留 Blob。如果您要将其持久化到服务器，您应该能够将其作为请求的附件发布。