Kann ich eine Aktion im Reduzierer auslösen?

Ist es möglich, eine Aktion in einem Reduzierer selbst auszulösen? Ich habe einen Fortschrittsbalken und ein Audioelement. Ziel ist es, den Fortschrittsbalken zu aktualisieren, wenn die Zeit im Audioelement aktualisiert wird. Ich weiß jedoch nicht, wo der Ereignishandler ontimeupdate platziert werden soll oder wie eine Aktion im Rückruf von ontimeupdate ausgelöst werden soll, um den Fortschrittsbalken zu aktualisieren. Hier ist mein 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;

Das Auslösen einer Aktion innerhalb eines Reduzierers ist ein Anti-Muster . Ihr Reduzierer sollte keine Nebenwirkungen haben, einfach die Nutzdaten der Aktion verdauen und ein neues Statusobjekt zurückgeben. Das Hinzufügen von Listenern und das Auslösen von Aktionen innerhalb des Reduzierers kann zu verketteten Aktionen und anderen Nebenwirkungen führen.

Klingt so, als ob Ihre initialisierte AudioElementKlasse und der Ereignis-Listener eher zu einer Komponente als zu einem Status gehören. Innerhalb des Ereignis-Listeners können Sie eine Aktion auslösen, die progressim Status aktualisiert wird .

Sie können das AudioElementKlassenobjekt entweder in einer neuen React-Komponente initialisieren oder diese Klasse einfach in eine React-Komponente konvertieren.

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

Beachten Sie, dass das updateProgressActionautomatisch verpackt wird, dispatchsodass Sie den Versand nicht direkt anrufen müssen.

Das Starten eines weiteren Versands, bevor Ihr Reduzierer fertig ist, ist ein Anti-Muster , da der Status, den Sie zu Beginn Ihres Reduzierers erhalten haben, nicht mehr der aktuelle Anwendungsstatus ist, wenn Ihr Reduzierer fertig ist . Das Planen eines weiteren Versands innerhalb eines Reduzierers ist jedoch KEIN Anti-Pattern . Genau das macht die Elm-Sprache, und wie Sie wissen, ist Redux ein Versuch, die Elm-Architektur auf JavaScript zu bringen.

Hier ist eine Middleware, die die Eigenschaft asyncDispatchallen Ihren Aktionen hinzufügt . Wenn Ihr Reduzierer fertig ist und den neuen Anwendungsstatus zurückgegeben hat, asyncDispatchwird er store.dispatchmit jeder Aktion ausgelöst, die Sie ihm geben.

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

Jetzt kann Ihr Reduzierer dies tun:

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

Sie könnten versuchen, eine Bibliothek wie Redux-Saga zu verwenden . Es ermöglicht eine sehr saubere Möglichkeit, asynchrone Funktionen zu sequenzieren, Aktionen auszulösen, Verzögerungen zu verwenden und vieles mehr. Es ist sehr mächtig!

Die Redux-Schleife nimmt einen Hinweis von Elm und liefert dieses Muster.