Puis-je envoyer une action dans le réducteur?

est-il possible d'envoyer une action dans un réducteur lui-même? J'ai une barre de progression et un élément audio. L'objectif est de mettre à jour la barre de progression lorsque l'heure est mise à jour dans l'élément audio. Mais je ne sais pas où placer le gestionnaire d'événements ontimeupdate, ni comment envoyer une action dans le rappel de ontimeupdate, pour mettre à jour la barre de progression. Voici mon code:

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

L'envoi d'une action dans un réducteur est un anti-motif . Votre réducteur doit être sans effets secondaires, il suffit de digérer la charge utile de l'action et de renvoyer un nouvel objet d'état. L'ajout d'écouteurs et la répartition des actions dans le réducteur peuvent entraîner des actions en chaîne et d'autres effets secondaires.

Des sons comme votre AudioElementclasse initialisée et l'écouteur d'événements appartiennent à un composant plutôt qu'à l'état. Dans l'écouteur d'événements, vous pouvez envoyer une action, qui sera mise progressà jour dans l'état.

Vous pouvez soit initialiser l' AudioElementobjet classe dans un nouveau composant React, soit simplement convertir cette classe en composant 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);

Notez que le updateProgressActionest automatiquement entouré de dispatchsorte que vous n'avez pas besoin d'appeler directement le dispatch.

Démarrer une autre expédition avant la fin de votre réducteur est un anti-modèle , car l'état que vous avez reçu au début de votre réducteur ne sera plus l'état actuel de l'application lorsque votre réducteur aura terminé. Mais planifier un autre envoi depuis un réducteur n'est PAS un anti-modèle . En fait, c'est ce que fait le langage Elm, et comme vous le savez, Redux est une tentative d'amener l'architecture Elm en JavaScript.

Voici un middleware qui ajoutera la propriété asyncDispatchà toutes vos actions. Lorsque votre réducteur a terminé et renvoyé le nouvel état de l'application, il asyncDispatchse déclenchera store.dispatchavec l'action que vous lui donnerez.

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

Maintenant, votre réducteur peut le faire:

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

Vous pourriez essayer d'utiliser une bibliothèque comme redux-saga . Il permet un moyen très propre de séquencer les fonctions asynchrones, de déclencher des actions, d'utiliser des retards et plus encore. C'est très puissant!

redux-loop s'inspire d'Elm et fournit ce modèle.