Содержащий провайдер, повторно отрендеренный изменениями в рендеринге реквизита, используя Redux - PullRequest
Новая
       7

Содержащий провайдер, повторно отрендеренный изменениями в рендеринге реквизита, используя Redux

0 голосов
/ 31 января 2019

У меня есть что-то вроде: 

const higherOrderComponent = (WrappedComponent) => {
  return class extends React.Component {
    render() {
      <CustomProvider
        render={({isLoading, playNote, playNoteAtTime, stopNote}) => {

            return <WrappedComponent />;
        }
      />
  }
};

В моем приложении выше одно хранилище резервных копий, и когда пользователь взаимодействует с 'WrappedComponent', он отправляет действие в хранилище, которое вызывает 'upperOrderComponent're-render.

Раньше это не было проблемой, так как я отдавал предпочтение компонентам без состояния, и позволяя новому состоянию проходить через полное приложение при изменении состояния, без проблем с производительностью.

Тем не менее, пользовательский поставщик асинхронно загружает некоторые файлы, поэтому теперь существует заметная проблема.

Идея решения состоит в том, чтобы ввести состояние в компоненте на уровне "HigherOrderComponent".Когда компонент будет впервые загружен, я буду заполнять состояние из реквизита магазина.

Тогда я мог бы сохранить и отправить действия, чтобы обновить магазин позже в удобное время.

Я не уверен, что создал анти-паттерн с вышеприведенным (хотя яиспользуя компонент высшего порядка одновременно с 'Render Props').

Или, если кто-нибудь может порекомендовать лучшее решение?

edit Меня попросили показатьчто делает CustomProvider, поэтому я добавил его сюда: 

class SampleProvider extends React.Component {
  static propTypes = {
    instrumentNames: PropTypes.array.isRequired,
    audioContext: PropTypes.instanceOf(window.AudioContext),
    render: PropTypes.func
  };

  static defaultProps = {
    currentInstrument: 'mooga'
  };

  constructor(props) {
    super(props);

    this.playNote = this.playNote.bind(this);
    this.state = {
      activeAudioNodes: {},
      instrument: null
    };
  }

  componentDidMount() {
    sampleLoader.init(this.props.audioContext, sampleFilePaths).then(loadedSamplesBuffers => {
      this.samplesBuffers = loadedSamplesBuffers;
      console.log('End: loading samples');
    });
  }

  playNote = midiNumber => {

    let play = samplePlayer(this.props.audioContext, this.props.mainOutput, this.samplesBuffers);

    play(midiNumber, 0, null, null, this.props.currentInstrument);

  };
...