redux 状态通过调度 Blob 获取空对象
redux state takes empty object by dispatching Blob
我目前正在做一个项目,我应该在其中录制用户的声音,然后将其发送到服务器。这个项目是在 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 收到空对象外,一切都很好。
You should not put non-serializable values into the Redux store,而 Blob
绝对是不可序列化的值。
实际的 数据 可能是正确的,但 DevTools 根本无法显示该值,因为 A) 它是 Blob
而不是任何可读的, 和 B) 该值无法正确序列化以在 DevTools 中显示。
这实际上是我们告诉用户不要这样做的一个很好的例子:)
我目前正在做一个项目,我应该在其中录制用户的声音,然后将其发送到服务器。这个项目是在 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 收到空对象外,一切都很好。
You should not put non-serializable values into the Redux store,而 Blob
绝对是不可序列化的值。
实际的 数据 可能是正确的,但 DevTools 根本无法显示该值,因为 A) 它是 Blob
而不是任何可读的, 和 B) 该值无法正确序列化以在 DevTools 中显示。
这实际上是我们告诉用户不要这样做的一个很好的例子:)