Is it ok/proper to put sound playback object into Redux store?
Meaning the sound object generated by this API call:
const { sound: playbackObject } = await Audio.Sound.createAsync(
{ uri: 'http://foo/bar.mp3' },
{ shouldPlay: true }
);
https://docs.expo.io/versions/latest/sdk/av/#example--audiosound
I have tried it and it seems to work (I am able to see the sound object within the React Native Dev Tools within the Redux State store).
The concern stems from not being able to print out the sound object due to
[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
And a single sound object does look a bit unwieldy (~300 lines when formatted)
{
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
}
]
},
_curr
