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;
AudioElement
? Es scheint, dass das nicht in einem Zustand sein sollte.Antworten:
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
AudioElement
Klasse 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, dieprogress
im Status aktualisiert wird .Sie können das
AudioElement
Klassenobjekt entweder in einer neuen React-Komponente initialisieren oder diese Klasse einfach in eine React-Komponente konvertieren.Beachten Sie, dass das
updateProgressAction
automatisch verpackt wird,dispatch
sodass Sie den Versand nicht direkt anrufen müssen.quelle
MyAudioPlayer
aus dem übergeordneten Container,connect
mit dem sie bearbeitet wurde, an die Komponente übergebenreact-redux
.mapDispatchToProps
updateProgressAction
in Ihrem Beispiel definiert?redux-thunk
eine Aktion wird von einer anderen Aktion ausgelöst , nicht vom Reduzierer. stackoverflow.com/questions/35411423/…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
asyncDispatch
allen Ihren Aktionen hinzufügt . Wenn Ihr Reduzierer fertig ist und den neuen Anwendungsstatus zurückgegeben hat,asyncDispatch
wird erstore.dispatch
mit jeder Aktion ausgelöst, die Sie ihm geben.Jetzt kann Ihr Reduzierer dies tun:
quelle
dispatch
die die Aktion zurückgeben sollten. Ich habe die letzten Zeilen geändert in:const res = next(actionWithAsyncDispatch); syncActivityFinished = true; flushQueue(); return res;
und es hat super funktioniert.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!
quelle
supplier
Informationsanfrage auslösen, wenn der Benutzer versucht, dieitem
Detailseite zu besuchen . SiecomponentDidMount()
würden beispielsweise eine Funktion auslösen, die eine Aktion auslöstFETCH_SUPPLIER
. Innerhalb des Reduzierers können Sie so etwas wie ein ankreuzen,loading: true
um einen Spinner anzuzeigen, während die Anfrage gestellt wird.redux-saga
würde auf diese Aktion warten und als Antwort die eigentliche Anfrage abfeuern. Mithilfe von Generatorfunktionen kann es dann auf die Antwort warten und sie ausgebenFETCH_SUPPLIER_SUCCEEDED
. Der Reduzierer aktualisiert dann das Geschäft mit Lieferanteninformationen.Die Redux-Schleife nimmt einen Hinweis von Elm und liefert dieses Muster.
quelle