redux state takes empty object by dispatching Blob

Question

I am currently working on a project in which I should record user's voice and then send it to server. This project is being done in ReactJS and Redux. I can record the voice correctly but when I dispatch this blob with the aim of updating the store, it takes empty object.

My Recorder component

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>
  );
};

My recorderActions:

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

My recorderReducer:

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

    default:
      return state;
  }
};

The actions are working fine. I mean the store updates the initial state but the value for blob in my state receives empty blob. the following picture is to demonstrate this.

It is worth mentioning that according the console loging of the payload everything is completely fine except for the fact that store receieves empty object.

Answer 1

You should not put non-serializable values into the Redux store, and a Blob is most definitely a non-serializable value.

It's possible that the actual data is there correctly, but the DevTools is unable to display that value at all because A) it's a Blob and not anything readable, and B) that value can't be serialized properly for display in the DevTools.

This is actually a good example of why we tell users not to do this :)