react-router-redux push nicht kompatibel mit Redux-Batch-Aktionen?

Question

Ich baue eine Reaktion & Redux-Anwendung, und habe das folgende Problem: In einer meiner Komponenten möchte ich programmatisch zu einer anderen Seite navigieren und ein Modal anzeigen.

Ich habe festgestellt, dass dies in zwei Operationen nicht gut in meiner App funktioniert, da der Status zweimal aktualisiert wird (wodurch mein Modal zweimal gerendert wird, was es zum Verschwinden bringt).

Also versuche ich den Zustand einmal mit redux-Batched-Aktionen zu aktualisieren, indem ich batchActions mit zwei Funktionen ("push" und "openModal" Art von Aktionen) aufrufen. Aber aus irgendeinem Grund funktioniert der Aufruf von "Push" innerhalb von BatchActions nicht. Beispiel:

import { push } from 'react-router-redux'; 
import { batchActions } from 'redux-batched-actions'; 

myFunction: function() { 
    this.props.newPath("/mypath"); 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     newPath: (path) => dispatch(batchActions([push(path)])), 
    } 
} 

Dispatching den Druckvorgang selbst funktioniert gut, wie folgt aus:

newPath: (path) => dispatch(push(path)) 

Und die Aktion modale Versand innerhalb batchAction funktioniert:

newPath: (path) => dispatch(batchActions([displayModal("title", "message"])) 

So scheint es, wie batchActions erkennt die "Push" -Aktion aus irgendeinem Grund nicht, und ich kann nicht herausfinden warum.

Kann jemand sehen, warum BatchActions die "Push" -Aktion nicht korrekt behandelt?

Grüße

Answer 1

react-router-reduxpush Aktionen werden von routerMiddleware verarbeitet. routerMiddleware sucht nur nach routerspezifischen Aktionen basierend auf ihrem Typ. redux-batched-actions andererseits umschließt zwei oder mehr Aktionen in einer zusammengesetzten Aktion mit einem speziellen für redux-batched-actions Typ. Daher identifiziert routerMiddleware diese Aktion nicht als Router-Aktion, wenn sie die Middleware durchlaufen hat und keine Änderung der Route stattfindet.

Es gibt ein Problem, das das Problem in https://github.com/ReactTraining/react-router/issues/5227 beschreibt.

Lösungen:

Es gibt ein anderes Paket, das Sie mit react-redux-router für Batch-Aktionen verwenden: react-batch-enhancer. Es funktioniert auf einer Middleware-Ebene, so dass zugrundeliegende Batch-Aktionen von entsprechenden Middleware verarbeitet werden.