redux 状态通过调度 Blob 获取空对象

Question

我目前正在做一个项目，我应该在其中录制用户的声音，然后将其发送到服务器。这个项目是在 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,
  };
};

我的记录器Reducer：

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

    default:
      return state;
  }
};

操作正常。我的意思是商店更新了初始状态，但我状态下的 blob 值收到空 blob。下面的图片就是为了证明这一点。

值得一提的是，根据 payload 的控制台日志记录，除了 store 收到空对象外，一切都很好。

Answer 1

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

实际的数据可能是正确的，但 DevTools 根本无法显示该值，因为 A) 它是 Blob 而不是任何可读的, 和 B) 该值无法正确序列化以在 DevTools 中显示。

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

redux 状态通过调度 Blob 获取空对象

redux state takes empty object by dispatching Blob

reactjs

redux

blob

dispatch