ReactNative：Expo-AV 将声音播放对象放入 Redux 存储是不是可以/正确？
Posted
技术标签:
【中文标题】ReactNative：Expo-AV 将声音播放对象放入 Redux 存储是不是可以/正确？【英文标题】：ReactNative: Expo-AV is it ok/proper to put Sound playback object into Redux store?ReactNative：Expo-AV 将声音播放对象放入 Redux 存储是否可以/正确？ 【发布时间】：2021-04-26 11:29:46 【问题描述】：将声音播放对象放入 Redux 存储是否可以/正确？
表示此 API 调用生成的声音对象：
const sound: playbackObject = await Audio.Sound.createAsync(
uri: 'http://foo/bar.mp3' ,
shouldPlay: true
);
https://docs.expo.io/versions/latest/sdk/av/#example--audiosound
我已经尝试过了，它似乎可以工作（我能够在 Redux State 商店的 React Native Dev Tools 中看到声音对象）。
担心是由于无法打印出声音对象
[Failed with error]: TypeError: Converting circular structure to JSON
--> starting at object with constructor 'EventSubscriptionVendor'
| property '_subscriptionsForType' -> object with constructor 'Object'
| property 'RCTDevMenuShown' -> object with constructor 'Array'
| index 0 -> object with constructor 'EmitterSubscription'
--- property 'subscriber' closes the circl
单个声音对象确实看起来有点笨拙（格式化后大约 300 行）
debugState:
sound:
_loaded: true,
_loading: false,
_key: 1,
_lastStatusUpdate: '"isMuted":false,"isBuffering":true,"uri":"/josh_leake-duskToDawn.mp3","shouldPlay":true,"durationMillis":273972,"isLoaded":true,"didJustFinish":false,"androidImplementation":"SimpleExoPlayer","isLooping":false,"progressUpdateIntervalMillis":500,"volume":1,"playableDurationMillis":5355,"shouldCorrectPitch":false,"isPlaying":true,"rate":1,"positionMillis":0',
_lastStatusUpdateTime: '2021-01-21T23:44:25.896Z',
_subscriptions: [
'@@nativeEmitterSubscription@@':
subscriber:
_subscriptionsForType:
RCTDevMenuShown: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]',
sharedSubscriber: '[CIRCULAR]',
_currentSubscription: null
,
eventType: 'RCTDevMenuShown',
key: 0
],
appStateDidChange: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]',
_supportedEvents: [
'change',
'memoryWarning',
'blur',
'focus'
],
isAvailable: true,
_eventHandlers:
change: ,
memoryWarning: ,
blur: ,
focus:
,
currentState: 'active'
,
eventType: 'appStateDidChange',
key: 0
],
websocketMessage: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'websocketMessage',
key: 0
,
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'websocketMessage',
key: 1
],
websocketOpen: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'websocketOpen',
key: 0
,
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'websocketOpen',
key: 1
],
websocketClosed: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'websocketClosed',
key: 0
,
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'websocketClosed',
key: 1
],
websocketFailed: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'websocketFailed',
key: 0
,
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'websocketFailed',
key: 1
],
didUpdateDimensions: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]',
sharedSubscriber: '[CIRCULAR]',
_currentSubscription: null
,
eventType: 'didUpdateDimensions',
key: 0
],
hardwareBackPress: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]',
sharedSubscriber: '[CIRCULAR]',
_currentSubscription: null
,
eventType: 'hardwareBackPress',
key: 0
],
collectBugExtraData: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]',
sharedSubscriber: '[CIRCULAR]',
_currentSubscription: null
,
context: null,
eventType: 'collectBugExtraData',
key: 0
],
collectRedBoxExtraData: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]',
sharedSubscriber: '[CIRCULAR]',
_currentSubscription: null
,
context: null,
eventType: 'collectRedBoxExtraData',
key: 0
],
toggleElementInspector: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]',
sharedSubscriber: '[CIRCULAR]',
_currentSubscription: null
,
eventType: 'toggleElementInspector',
key: 0
,
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]',
sharedSubscriber: '[CIRCULAR]',
_currentSubscription: null
,
eventType: 'toggleElementInspector',
key: 1
],
didSendNetworkData: [
null,
null,
null,
null,
null
],
didReceiveNetworkResponse: [
null,
null,
null,
null,
null
],
didReceiveNetworkData: [
null,
null,
null,
null,
null
],
didReceiveNetworkIncrementalData: [
null,
null,
null,
null,
null
],
didReceiveNetworkDataProgress: [
null,
null,
null,
null,
null
],
didCompleteNetworkResponse: [
null,
null,
null,
null,
null
],
keyboardWillShow: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'keyboardWillShow',
key: 0
],
keyboardWillHide: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'keyboardWillHide',
key: 0
],
keyboardDidShow: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'keyboardDidShow',
key: 0
],
keyboardDidHide: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'keyboardDidHide',
key: 0
],
didUpdatePlaybackStatus: [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'didUpdatePlaybackStatus',
key: 0
,
'[CIRCULAR]'
],
'ExponentAV.onError': [
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'ExponentAV.onError',
key: 0
,
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'ExponentAV.onError',
key: 1
]
,
_currentSubscription: null
,
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'didUpdatePlaybackStatus',
key: 1
,
'@@nativeEmitterSubscription@@':
subscriber: '[CIRCULAR]',
emitter:
_subscriber: '[CIRCULAR]'
,
eventType: 'ExponentAV.onError',
key: 1
],
_eventEmitter:
_listenerCount: 2,
_nativeModule: ,
_eventEmitter:
_subscriber: '[CIRCULAR]'
,
_coalesceStatusUpdatesInMillis: 100
【问题讨论】：
【参考方案1】：好的，发现这个指导说明我不应该把它放到 Redux 商店 https://redux.js.org/style-guide/style-guide#do-not-put-non-serializable-values-in-state-or-actions
【讨论】：
以上是关于ReactNative：Expo-AV 将声音播放对象放入 Redux 存储是不是可以/正确？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 expo-av Video 上使用 playFromPositionAsync？反应原生