Bisakah saya mengirim tindakan dalam peredam?

apakah mungkin mengirim tindakan dalam peredam itu sendiri? Saya memiliki progressbar dan elemen audio. Tujuannya adalah untuk memperbarui progressbar ketika waktu diperbarui dalam elemen audio. Tapi saya tidak tahu di mana harus menempatkan eventhandler ontimeupdate, atau bagaimana mengirim tindakan dalam panggilan balik ontimeupdate, untuk memperbarui progressbar. Ini kode saya:

//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;

Mengirim tindakan dalam peredam adalah anti-pola . Peredam Anda harus tanpa efek samping, cukup mencerna payload tindakan dan mengembalikan objek keadaan baru. Menambahkan pendengar dan mengirim tindakan dalam peredam dapat menyebabkan aksi berantai dan efek samping lainnya.

Kedengarannya seperti AudioElementkelas yang diinisialisasi Anda dan pendengar acara termasuk dalam komponen dan bukan dalam keadaan. Dalam pendengar acara, Anda dapat mengirim tindakan, yang akan diperbaruiprogress dalam keadaan.

Anda dapat menginisialisasi AudioElementobjek kelas di komponen Bereaksi baru atau hanya mengkonversi kelas itu ke komponen Bereaksi.

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);

Perhatikan bahwa updateProgressActionsecara otomatis dibungkus dengan dispatchsehingga Anda tidak perlu menelepon pengiriman langsung.

Memulai pengiriman lain sebelum peredam Anda selesai adalah anti-pola , karena status yang Anda terima di awal peredam Anda tidak akan menjadi status aplikasi saat ini saat peredam Anda selesai. Tapi menjadwalkan pengiriman lain dari dalam peredam BUKAN anti-pola . Sebenarnya, itulah yang dilakukan bahasa Elm, dan seperti yang Anda ketahui Redux adalah upaya untuk membawa arsitektur Elm ke JavaScript.

Ini adalah middleware yang akan menambahkan properti asyncDispatchke semua tindakan Anda. Ketika peredam Anda telah selesai dan mengembalikan status aplikasi baru, asyncDispatchakan terpicu store.dispatchdengan tindakan apa pun yang Anda berikan.

// 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;
};

Sekarang peredam Anda dapat melakukan ini:

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 });;
  }
}

Anda dapat mencoba menggunakan perpustakaan seperti redux-saga . Ini memungkinkan untuk cara yang sangat bersih untuk mengurutkan fungsi-fungsi async, menjalankan aksi, menggunakan penundaan dan banyak lagi. Ini sangat kuat!

redux-loop mengambil isyarat dari Elm dan memberikan pola ini.