Redüktörde bir eylem gönderebilir miyim?

bir indirgeyicinin kendisinde bir eylem göndermek mümkün mü? Bir ilerleme çubuğu ve ses öğem var. Amaç, ses öğesinde saat güncellendiğinde ilerleme çubuğunu güncellemektir. Ancak ilerleme çubuğunu güncellemek için ontimeupdate olay işleyicisini nereye yerleştireceğinizi veya ontimeupdate geri çağrısında bir eylemin nasıl gönderileceğini bilmiyorum. İşte benim kod:

//reducer

const initialState = {
    audioElement: new AudioElement('test.mp3'),
    progress: 0.0
}

initialState.audioElement.audio.ontimeupdate = () => {
    console.log('progress', initialState.audioElement.currentTime/initialState.audioElement.duration);
    //how to dispatch 'SET_PROGRESS_VALUE' now?
};


const audio = (state=initialState, action) => {
    switch(action.type){
        case 'SET_PROGRESS_VALUE':
            return Object.assign({}, state, {progress: action.progress});
        default: return state;
    }

}

export default audio;

Bir indirgeyici içinde bir eylem göndermek bir anti-modeldir . Düşürücünüz yan etkisiz olmalı, sadece eylem yükünü sindirmeli ve yeni bir durum nesnesi döndürmelidir. Dinleyici eklemek ve redüktör içine eylemler göndermek zincirleme eylemlere ve diğer yan etkilere yol açabilir.

Başlangıç AudioElementsınıfınız ve olay dinleyiciniz durumdan ziyade bir bileşene aittir. Olay dinleyicisi içinde, durum güncellemesi yapılacak bir eylem gönderebilirsiniz progress.

AudioElementSınıf nesnesini yeni bir React bileşeninde başlatabilir veya bu sınıfı bir React bileşenine dönüştürebilirsiniz.

class MyAudioPlayer extends React.Component {
  constructor(props) {
    super(props);

    this.player = new AudioElement('test.mp3');

    this.player.audio.ontimeupdate = this.updateProgress;
  }

  updateProgress () {
    // Dispatch action to reducer with updated progress.
    // You might want to actually send the current time and do the
    // calculation from within the reducer.
    this.props.updateProgressAction();
  }

  render () {
    // Render the audio player controls, progress bar, whatever else
    return <p>Progress: {this.props.progress}</p>;
  }
}

class MyContainer extends React.Component {
   render() {
     return <MyAudioPlayer updateProgress={this.props.updateProgress} />
   }
}

function mapStateToProps (state) { return {}; }

return connect(mapStateToProps, {
  updateProgressAction
})(MyContainer);

Doğrudan updateProgressActionotomatik dispatcholarak çağrılmanıza gerek olmadığından, öğesinin otomatik olarak sarıldığını unutmayın .

Redüktörünüz bitmeden başka bir gönderim başlatmak bir anti-modeldir , çünkü redüktörünüzün başında aldığınız durum, redüktörünüz bittiğinde artık geçerli uygulama durumu olmayacaktır. Ancak bir redüktörün içinden başka bir dağıtım programlamak bir anti-kalıp DEĞİLDİR . Aslında, Elm dili budur ve bildiğiniz gibi Redux, Elm mimarisini JavaScript'e getirme girişimidir.

İşte özelliği asyncDispatchtüm eylemlerinize ekleyecek bir ara katman yazılımı . Redüktörünüz bittiğinde ve yeni uygulama durumunu iade ettiğinde, ona ne tür bir işlem yaparsanız asyncDispatchbaşlayacaktır store.dispatch.

// This middleware will just add the property "async dispatch"
// to actions with the "async" propperty set to true
const asyncDispatchMiddleware = store => next => action => {
  let syncActivityFinished = false;
  let actionQueue = [];

  function flushQueue() {
    actionQueue.forEach(a => store.dispatch(a)); // flush queue
    actionQueue = [];
  }

  function asyncDispatch(asyncAction) {
    actionQueue = actionQueue.concat([asyncAction]);

    if (syncActivityFinished) {
      flushQueue();
    }
  }

  const actionWithAsyncDispatch =
    Object.assign({}, action, { asyncDispatch });

  const res = next(actionWithAsyncDispatch);

  syncActivityFinished = true;
  flushQueue();

  return res;
};

Şimdi redüktörünüz bunu yapabilir:

function reducer(state, action) {
  switch (action.type) {
    case "fetch-start":
      fetch('wwww.example.com')
        .then(r => r.json())
        .then(r => action.asyncDispatch({ type: "fetch-response", value: r }))
      return state;

    case "fetch-response":
      return Object.assign({}, state, { whatever: action.value });;
  }
}

Redux-saga gibi bir kütüphane kullanmayı deneyebilirsiniz . Eşzamansız işlevleri sıralamak, eylemleri kapatmak, gecikmeler kullanmak ve daha fazlasını yapmak için çok temiz bir yol sağlar . Çok güçlü!

redux-loop Elm'den bir ipucu alır ve bu modeli sağlar.