Как отследить наблюдаемые обновления Mobx в постоянном компоненте NextJS React Audio Player? - PullRequest
Новая
       69

Как отследить наблюдаемые обновления Mobx в постоянном компоненте NextJS React Audio Player?

0 голосов
/ 05 октября 2019

У меня есть приложение для воспроизведения аудио на стороне сервера.

Используя customJapp'jj NextJS , у меня есть постоянный компонент AudioPlayer, в котором я хочу вызвать внутренний *Функция 1005 * всякий раз, когда @observable playerData = {} изменяется в хранилище mobx.

Я успешно нажимал кнопки на других компонентах в моем обновлении приложения playerData всякий раз, когда это необходимо.

Но я не могу обнаружить этиобновления внутри моего компонента AudioPlayer, чтобы я мог установить его состояние и вызвать this.play(mp3url), чтобы начать воспроизведение аудио.

страниц / _app.js 

import initializeStore from '../stores/stores';

export default class MyApp extends App {

  static async getInitialProps(appContext) {
    const mobxStore = initializeStore();
    appContext.ctx.mobxStore = mobxStore;
    const appProps = await App.getInitialProps(appContext);
    return {
      ...appProps,
      initialMobxState: mobxStore,
    };
  }

  constructor(props) {
    super(props);
    this.mobxStore = props.initialMobxState;
  }

  render () {
    const { Component, pageProps } = this.props
    return (
      <Provider {...this.mobxStore}>
          <Component {...pageProps} />
        { this.mobxStore.playerStore.playerActive && <AudioPlayer /> }
      </Provider>
    )
  }
}

компонентов / AudioPlayer.js 

import ReactPlayer from 'react-player'
import { inject, observer } from 'mobx-react'

@inject('playerStore')
@observer
class Player extends Component{
    constructor(props) {
        super(props)
        this.state = {
            url: null,
            image: null
        }
    }
    componentWillUpdate(nextProps) {
        this.setState({
            url: nextProps.playerStore.playerData.url,
            image: nextProps.playerStore.playerData.image
        }, () => { this.play(this.state.url) })
    }

    // ...Other react-player functions

    render() {
        <ReactPlayer 
        {/* ...required props... */}
        />
    }
}

Итаккак можно заставить этот постоянный аудиоплеер обнаруживать изменения в mobx, наблюдаемые для воспроизведения звуковых URL-адресов?

На данный момент componentWillReceiveProps, componentWillUpdate или componentDidUpdate не вызывают. componentDidMount вызывается ровно один раз, как и ожидалось, когда я установил @observable playerActive = true

1 Ответ

0 голосов
/ 06 октября 2019

удалось выяснить это. Это было вызвано двумя проблемами .

  1. Согласно документам Mobx

Функция наблюдателя / декоратор может использоваться для превращения компонентов ReactJS в реактивные компоненты. Он оборачивает функцию рендеринга компонента в mobx.autorun, чтобы убедиться, что любые данные, используемые во время рендеринга компонента, вызывают повторный рендеринг при изменении. Он доступен через отдельный пакет mobx-response.

В функции визуализации компонента-наблюдателя должен использоваться наблюдаемый магазин, чтобы компонент реагировал на его изменения. Поэтому я добавил их в компонент AudioPlayer вместо того, чтобы выводить его из собственного состояния.

Мне не хватало этой важной строки кода в конструкторе pages/_app.js, который правильно инициализировал бы хранилище mobx на стороне клиента. 
this.mobxStore = isServer ? props.initialMobxState : initializeStore(props.initialMobxState)

Теперь компонент AudioPlayer реагирует на каждое обновление наблюдаемой mobx, и я могу обработать любую дополнительную необходимую логику в componentWillUpdate / componentDidUpdate

...