ฉันสามารถส่งการกระทำด้วยตัวลดได้หรือไม่?

เป็นไปได้ไหมที่จะส่งการกระทำในตัวลดเอง? ฉันมีแถบความคืบหน้าและองค์ประกอบเสียง เป้าหมายคือการอัพเดทแถบความคืบหน้าเมื่อเวลาได้รับการปรับปรุงในองค์ประกอบเสียง แต่ฉันไม่รู้ว่าจะวางตำแหน่งตัวจัดการเหตุการณ์ ontime หรือวิธีส่งการดำเนินการในการเรียกกลับของ ontimeupdate เพื่ออัพเดทแถบความคืบหน้า นี่คือรหัสของฉัน:

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

การฝึกอบรมการดำเนินการภายในลดคือการป้องกันรูปแบบ ตัวลดของคุณควรไม่มีผลข้างเคียงเพียงย่อยส่วนของข้อมูลการดำเนินการและส่งคืนวัตถุสถานะใหม่ การเพิ่มตัวรับฟังและการดำเนินการภายในตัวลดสามารถนำไปสู่การกระทำที่ถูกล่ามโซ่และผลข้างเคียงอื่น ๆ

เสียงเหมือนAudioElementคลาสเริ่มต้นของคุณและผู้ฟังเหตุการณ์อยู่ในส่วนประกอบแทนที่จะอยู่ในสถานะ ภายในฟังเหตุการณ์คุณสามารถส่งการกระทำซึ่งจะปรับปรุงprogressในสถานะ

คุณสามารถเริ่มต้นAudioElementวัตถุคลาสในองค์ประกอบ React ใหม่หรือเพียงแปลงคลาสนั้นเป็นส่วนประกอบ React

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

โปรดทราบว่าupdateProgressActionจะมีการห่อโดยอัตโนมัติdispatchเพื่อให้คุณไม่จำเป็นต้องโทรจัดส่งโดยตรง

การเริ่มต้นการส่งอีกครั้งก่อนที่ตัวลดของคุณจะเสร็จสิ้นเป็นรูปแบบการต่อต้านเนื่องจากสถานะที่คุณได้รับที่จุดเริ่มต้นของตัวลดของคุณจะไม่เป็นสถานะแอปพลิเคชันปัจจุบันอีกต่อไปเมื่อตัวลดของคุณเสร็จสิ้น แต่การตั้งเวลาการจัดส่งอีกจากภายในลดไม่ได้เป็นรูปแบบการป้องกัน ในความเป็นจริงนั่นคือสิ่งที่ภาษา Elm ทำและอย่างที่คุณรู้ว่า Redux เป็นความพยายามที่จะนำสถาปัตยกรรม Elm มาสู่ JavaScript

นี่คือมิดเดิลแวร์ที่จะเพิ่มคุณสมบัติasyncDispatchให้กับการกระทำของคุณทั้งหมด เมื่อตัวลดของคุณเสร็จสิ้นและส่งคืนสถานะแอปพลิเคชันใหม่asyncDispatchจะทริกเกอร์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;
};

ตอนนี้ตัวลดของคุณสามารถทำสิ่งนี้ได้:

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-เทพนิยาย จะช่วยให้วิธีที่สะอาดมากในการจัดลำดับฟังก์ชั่น async ดับการกระทำใช้ความล่าช้าและอื่น ๆ มันทรงพลังมาก!

redux-loopใช้คิวจาก Elm และแสดงรูปแบบนี้