0

Ich bin neu zu reagieren und Redux, ich begann mein Projekt mit dem Reag-Router-Dom, jetzt bin ich auf der Suche nach Redux in den Mix.Confusion-Router-dom und react-Router-Redux

Sollte ich react-router-dom weiterverwenden oder einfach react-router-redux installieren? oder beides? Funktioniert die Route-Komponente gleich? Ich bin ein bisschen verwirrt, wie der Einsatz von react-router-dom wäre?

Schalte ich alle Link-Komponenten auf ein Element um, das eine Aktion an den Speicher sendet?

Danke für jede Hilfe.

Antwort

1

Im Allgemeinen wird bei Verwendung von Redux empfohlen, react-router-redux zu verwenden, das react-router einkapselt.

Nur wenn Sie Ihre App initialisieren, sollten Sie ein paar Dinge vom React-Router an Redux übergeben, die Router und browserHistory10 sind.

In app.js:

import { Router, browserHistory } from 'react-router'; 
import { syncHistoryWithStore } from 'react-router-redux'; 

const initialState = {}; 
const store = configureStore(initialState, browserHistory); 

const history = syncHistoryWithStore(browserHistory, store); 

const render =() => { 
    ReactDOM.render(
    <Provider store={store}> 
     <Router 
      history={history} 
      routes={rootRoute} 
     /> 
    </Provider>, 
    document.getElementById('app') 
); 
}; 

Sie stellen die Router-Element als Kind von Redux des Anbieters Element reagieren von und Sie auch für browserHistory die Reaktion der Redux-Wrapper mit dem Router-Element zur Verfügung stellen.

Im Rest Ihres Projekts müssen Sie nur react-router-redux verwenden, anstatt React direkt aufzurufen.

react-router-dom BTW ist nur eine weitere Ebene der Vereinfachung in React 4, die react-Router einkapselt, aber für den Fall, dass Ihre Projektarchitektur Redux ist, müssen Sie nach den Regeln von Redux arbeiten und daher nur reagieren -router-redux, um den Speicher in jeder Aktion (mit Ausnahme der oben genannten Initialisierung) zu durchlaufen.

1

Ich empfehle Ihnen die Verwendung von react-router-redux. Mit react-router-redux können Sie Ihren Router-Status mit Ihrem Redux Store verbinden, so dass Sie mit dem Router mit der gleichen API interagieren können, die Sie für die Interaktion mit dem Rest Ihres App-Status verwenden.

0

Verwenden Sie react-router-redux.

Mit react-router-redux wird der Standortzustand in Ihrem Redox-Store als einfaches Objekt beibehalten. Dies bedeutet, dass Sie Standortinformationen mit Connect wie jeden anderen Status eingeben können.