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

Question

Ich versuche eine React.js-Version von https://rarwe-demo.pagefrontapp.com/bands mit React-Router und Redux zu erstellen.

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.

Answer 1

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

Answer 2

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.