Tôi có thể gửi một hành động trong giảm tốc?

Có thể gửi một hành động trong một bộ giảm tốc? Tôi có một thanh tiến trình và một yếu tố âm thanh. Mục tiêu là cập nhật thanh tiến trình khi thời gian được cập nhật trong phần tử âm thanh. Nhưng tôi không biết nơi đặt trình tạo sự kiện ontimeupdate hoặc cách gửi một hành động trong cuộc gọi lại của ontimeupdate, để cập nhật thanh tiến trình. Đây là mã của tôi:

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

Gửi một hành động trong một bộ giảm tốc là một mô hình chống . Bộ giảm tốc của bạn nên không có tác dụng phụ, chỉ cần tiêu hóa tải trọng hành động và trả về một đối tượng trạng thái mới. Thêm người nghe và gửi các hành động trong bộ giảm tốc có thể dẫn đến các hành động bị xiềng xích và các tác dụng phụ khác.

Âm thanh như AudioElementlớp khởi tạo của bạn và người nghe sự kiện thuộc về một thành phần chứ không phải ở trạng thái. Trong trình lắng nghe sự kiện, bạn có thể gửi một hành động, sẽ cập nhậtprogress trạng thái.

Bạn có thể khởi tạo AudioElementđối tượng lớp trong thành phần React mới hoặc chỉ chuyển đổi lớp đó thành thành phần 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);

Lưu ý rằng updateProgressActiongói được tự động đóng gói dispatchđể bạn không cần gọi công văn trực tiếp.

Bắt đầu một công văn khác trước khi bộ giảm tốc của bạn kết thúc là một mẫu chống , bởi vì trạng thái bạn nhận được khi bắt đầu bộ giảm tốc sẽ không còn là trạng thái ứng dụng hiện tại nữa khi bộ giảm tốc của bạn kết thúc. Nhưng lên lịch một công văn khác từ bên trong bộ giảm tốc KHÔNG phải là một mô hình chống . Trên thực tế, đó là những gì ngôn ngữ Elm làm và như bạn biết Redux là một nỗ lực để đưa kiến ​​trúc Elm vào JavaScript.

Đây là một phần mềm trung gian sẽ thêm tài sản asyncDispatchcho tất cả các hành động của bạn. Khi trình giảm tốc của bạn kết thúc và trả về trạng thái ứng dụng mới, asyncDispatchsẽ kích hoạt store.dispatchbất kỳ hành động nào bạn đưa ra cho nó.

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

Bây giờ bộ giảm tốc của bạn có thể làm điều này:

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

Bạn có thể thử sử dụng một thư viện như redux-saga . Nó cho phép một cách rất rõ ràng để sắp xếp các chức năng không đồng bộ, tắt các hành động, sử dụng độ trễ và hơn thế nữa. Nó rất mạnh mẽ!

redux-loop lấy một gợi ý từ Elm và cung cấp mẫu này.