Чи можна відправити дію в редукторі?

чи можна відправити дію в самому редукторі? У мене є панель прогресу та звуковий елемент. Мета - оновити панель прогресу, коли час оновлюється в аудіоелементі. Але я не знаю, де розмістити ontimeupdate eventhandler або як відправити дію в зворотному дзвінку 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-saga . Це дозволяє дуже чистим способом послідовності функцій асинхронізації, відключення дій, використання затримок тощо. Це дуже потужно!

redux-loop приймає підказку від Elm і надає цю схему.