Wie Seitenaufrufe in einer Reaktion/Redux App

Question

bearbeiten

Eigentlich registrieren, ich bin ziemlich sicher, dass dies, weil mein Handeln Schöpfer keine Aktion und die erste Eigenschaft einer Handlung zurückkehrt soll ein Typ sein und das ist daher undefined ...

Ich habe eine React/Redux SPA, die ich mit einer benutzerdefinierten Analytics-Engine (dh nicht Google Analytics) auf Seitenansichten registrieren möchte. Ich versuche, Seitenaufrufe zu registrieren.

So habe ich versucht, dies zu tun, indem Lifecycle Haken in React eine Redux Aktion Feuer:

class ConfirmationPage extends Component { 
    ... 
    componentWillMount() { 
    this.props.registerPageVisited('confirmation'); 
    } 
} 

Allerdings erhalte ich einen Fehler Cannot read property 'type' of undefined vermutlich, weil ich den Zustand über die Requisiten am modifizieren. Wenn ich auf die Stapelspur schaue, bringt es mich zu diesem Haken. Allerdings habe ich andere Haken wie componentDidMount und sogar componentWillUnMount versucht und ich bekomme den gleichen Fehler.

Für Kontext, meine Aktion Schöpfer ist dies:

export function registerPageVisited(page) { 
    DB.child('visits') 
    .child(store.getState().visit) 
    .update({ [page]: true }); 
} 

wo die DB eine Feuerbasis Referenz.

Also, wie soll ich die Seitenaufrufe verfolgen?

Answer 1

Konnten Sie Code zur Verfügung stellen, in dem Sie ConfirmationPage Komponente instanziieren?

In der componentWillMount Funktion, was Sie tatsächlich tun registerPageVisited Funktion aufruft, die als Requisiten übergeben werden sollte, die etwas aussehen sollte: <ComponentPage registerPageVisited={registerPageVisited} />

Wie Sie den Verdacht, da Ihr registerPageVisited nicht zurück Aktionsobjekt ist es nicht Aktion Schöpfer. Wenn Sie es zu einem Aktionsersteller machen, sollten Sie die Funktion mapDispatchToProps verwenden, um es wie alle anderen Requisiten in Ihrem Beispiel zu verwenden.

Answer 2

Eine Alternative zu diesem ist ein anderes Objekt zu haben, um Benachrichtigungen aus dem Speicher zu hören und die Datenbank basierend auf den Änderungen, die es sieht, zu aktualisieren. Dadurch werden alle Metriksammlungen aus Ihrer Sichthierarchie isoliert.

Sie müssten einige Logik replizieren, die bestimmt, welche React-Komponenten in diesem Objekt angezeigt werden, aber Sie könnten diese in eine separate Klasse ziehen und an beiden Stellen verwenden.

Wenn Sie react-router verwenden, können Hooks ausgelöst werden, wenn sich die aktive Route ändert. Das habe ich jedoch nicht untersucht.