ReactNative: Expo-AV是否可以/适当地将声音播放对象放入Redux商店？

Question

是否可以/正确地将声音播放对象放入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 store中的React Native Dev工具中看到声音对象)。

这种担忧源于由于以下原因而无法打印出声音对象

[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
    }
  }
}

Answer 1

Ok找到了这个指南，它指出我不应该把这个放到Redux store https://redux.js.org/style-guide/style-guide#do-not-put-non-serializable-values-in-state-or-actions中