React-Router: Navigation basierend auf dem in Redux Reducer erstellten Wert

Ich versuche eine React.js-Version von https://rarwe-demo.pagefrontapp.com/bands mit React-Router und Redux zu erstellen.React-Router: Navigation basierend auf dem in Redux Reducer erstellten Wert

Ich möchte das Verhalten der anderen App nachahmen, wenn ein neues Band erstellt wird. Nämlich, navigieren Sie zu der neuen Band.

Die URL der App lautet .../bands/<bandid>/songs. Ich speichere Bänder in einem Array und <bandid> ist der Index in das Array und ich weiß nicht, was das ist, bis nach es erstellt wird.

[ 
    { 
     id: 0, 
     name: 'Pearl Jam', 
     songs: [ 
      ... 
     ] 
    }, 
    { 
     id: 1, 
     name: 'Led Zeppelin', 
     songs: [ 
      ... 
     ] 
    }, 
]

Mein erster Gedanke war, eine andere Aktion zu versenden. Aber das scheint falsch zu sein, um eine "changeUrl" -Aktion basierend auf dem Bandnamen zu haben. Außerdem, wie würde ich das in der richtigen Reihenfolge tun, da die Erstellungsoperation eine Weile dauern könnte?

Es fühlt sich auch falsch an, einen "selectedBand" -Wert in Redux zu speichern, als dann muss ich die URL sicherstellen und dieser Wert wird synchronisiert.

Ich vermute, es gibt einen "Standard" Weg, es zu tun, aber mein Google-Foo ist fehlgeschlagen. Ich habe eine Menge Beispiele dafür gefunden, wie man eine Redux-Aktion basierend auf einem URL-Übergang ausgelöst hat, aber nicht umgekehrt.

Quelle

2016-08-09 MattDuFeu

Angenommen, die Bänder und das Eingabefeld sind in einer Komponente MenuBar aufgeführt. Sie können eine componentWillReceiveProps Methode in diese Komponente schreiben. Wenn ein neues Band erstellt wird, stellen Sie sicher, dass der Reduzierer eine Antwort an die Komponente MenuBar sendet.

Jetzt innerhalb der componentWillReceiveProps schreiben Sie eine Bedingung, dass wenn ein neues Band erstellt wird dies ausgeführt wird.

browserHistory.push('/bands/<newbandid>/songs')

Quelle

2016-08-09 15:45:03 Deadfish

Wie stelle ich sicher, dass der Reducer eine Antwort auf die MenuBar-Komponente sendet? Das hört sich an, als ob man etwas zu dem Zustand hinzufügt, von dem ich glaube, dass ich ihn vermeiden sollte – MattDuFeu

die Komponente verbinden. Es wird auf den Laden zugreifen können. Lesen Sie [redux documentation] (http://redux.js.org/docs/basics/UsageWithReact.html) für detaillierte Anweisungen. – Deadfish

Es scheint, der empfohlene Weg Redux-Thunk https://github.com/reactjs/redux/issues/1543#issuecomment-201364298

Ich habe es noch nicht probiert zu bedienen ist, aber so etwas wie dies innerhalb der:

dispatch(create_action); 
get_new_id_from_state(); 
browserHistory.push(new_id);

Ich werde dieses Update mit dem endgültigen Code, wenn ich die Chance habe, dies tatsächlich zu tun.

Quelle

2016-08-15 15:09:46 MattDuFeu

React-Router: Navigation basierend auf dem in Redux Reducer erstellten Wert

Antwort

Verwandte Themen