Welche Beziehung besteht zwischen React, Redux und React-Redux?

Was Ihnen dieser Artikel bringt, ist die Beziehung zwischen React, Redux und React-Redux? , hat einen bestimmten Referenzwert, Freunde in Not können sich darauf beziehen, ich hoffe, es wird Ihnen hilfreich sein.

Reagieren

Für einige kleine Projekte reichen nur Requisiten und Status für die Datenverwaltung aus. ? Wenn die Daten zum Rendern einer Komponente über Requisiten von der übergeordneten Komponente abgerufen werden, ist dies normalerweise A -> B, aber mit zunehmender Geschäftskomplexität kann es so sein: A -> B -> C -> > D --> E, die von E benötigten Daten müssen von A über Requisiten weitergeleitet werden, und das entsprechende E --> Die Komponente BCD benötigt diese Daten nicht, sie muss jedoch durch sie geleitet werden, was in der Tat etwas unangenehm ist, und die übergebenen Requisiten und Rückrufe wirken sich auch auf die Wiederverwendung der BCD-Komponente aus. Oder wenn Geschwisterkomponenten bestimmte Daten gemeinsam nutzen möchten, ist es nicht sehr bequem, diese zu übertragen oder abzurufen. In solchen Situationen ist die Einführung von Redux notwendig.

Tatsächlich kann React die Daten Schicht für Schicht abrufen. . Das React-Redux, das später besprochen wird, verwendet Kontext, um es jeder Unterkomponente zu ermöglichen, die Daten im Speicher abzurufen.

Redux

Eigentlich wollen wir nur einen Ort zum Speichern einiger gemeinsamer Daten finden, die jeder abrufen und ändern kann, das ist alles. Ist es in Ordnung, alle Variablen in eine einzige Variable einzufügen? Ja, natürlich funktioniert es, aber es ist zu unelegant und unsicher, da es sich um eine globale Variable handelt und jeder darauf zugreifen und sie ändern kann. Sie kann versehentlich von einem Freund überschrieben werden. Wenn globale Variablen nicht funktionieren, verwenden Sie einfach private Variablen, die nicht einfach geändert werden können ...

Jetzt müssen wir eine solche Funktion schreiben, die Folgendes erfüllt:

Speichern eines Datenobjekts
Die Außenwelt kann auf diese Daten zugreifen
Die Außenwelt kann diese Daten auch ändern
Wenn sich die Daten ändern, benachrichtigen Sie die Abonnenten

function createStore(reducer, initialState) {
 // currentState就是那个数据
 let currentState = initialState;
 let listener = () => {};
 
 function getState() {
 return currentState;
 }
 function dispatch(action) {
 currentState = reducer(currentState, action); // 更新数据
 listener(); // 执行订阅函数
 return action;
 }
 function subscribe(newListener) {
 listener = newListener;
 // 取消订阅函数
 return function unsubscribe() {
  listener = () => {};
 };
 }
 return {
 getState,
 dispatch,
 subscribe
 };
}
 
const store = createStore(reducer);
store.getState(); // 获取数据
store.dispatch({type: 'ADD_TODO'}); // 更新数据
store.subscribe(() => {/* update UI */}); // 注册订阅函数

Schritte zum Aktualisieren der Daten :

Was: Was möchten Sie tun--- Dispatch(Aktion)
Wie: Wie wird es gemacht, das Ergebnis davon--- Reducer(oldState, Aktion) => NewState
Dann?: Führen Sie die Abonnementfunktion erneut aus (z. B. erneutes Rendern der Benutzeroberfläche usw.)
Auf diese Weise wird ein Geschäft implementiert, das ein Datenspeicherzentrum bereitstellt, auf das extern zugegriffen, geändert usw. werden kann . Dies ist die Hauptidee von Redux. Daher hat Redux keine wesentliche Beziehung zu React und kann normalerweise in Kombination mit anderen Bibliotheken verwendet werden. Es ist nur so, dass die Datenverwaltungsmethode von Redux sehr gut mit dem datengesteuerten Ansichtskonzept von React übereinstimmt. Die Kombination beider macht die Entwicklung sehr komfortabel.

Da wir nun einen sicheren Ort für den Zugriff auf Daten haben, wie können wir diese in React integrieren? Wir können bei der Initialisierung der Anwendung einen window.store = createStore(reducer) erstellen und dann bei Bedarf Daten über store.getState() abrufen, die Daten über store.dispatch aktualisieren und Datenänderungen über store.subscribe abonnieren Führen Sie setState aus ... Wenn Sie dies an vielen Stellen tun, wird es wirklich überwältigend sein und die Uneleganz globaler Variablen wird dadurch immer noch nicht vermieden.

React-Redux

Da globale Variablen viele Mängel aufweisen, ändern wir die Idee und integrieren den Store direkt in die Top-Level-Requisiten der React-Anwendung Als jede Unterkomponente reicht es aus, Zugriff auf die Requisiten der obersten Ebene zu haben, wie zum Beispiel:

<TopWrapComponent store={store}>
 <App />
</TopWrapComponent>,

React bietet genau einen solchen Hook, Context, und seine Verwendung ist sehr einfach Werfen Sie einen Blick auf die offizielle Demo. Da nun jede Unterkomponente problemlos auf den Store zugreifen kann, besteht der nächste Schritt darin, dass die Unterkomponente die im Store verwendeten Daten herausnimmt, sie ändert und sich für die Aktualisierung der Benutzeroberfläche usw. anmeldet. Jede Unterkomponente muss dies erneut tun. Offensichtlich muss es einen bequemeren Weg geben: Komponenten höherer Ordnung. Durch die Kapselung von store.getState(), store.dispatch und store.subscribe durch höherwertige Komponenten haben die Unterkomponenten kein Bewusstsein für den Store. Die Unterkomponenten verwenden normalerweise Requisiten, um Daten abzurufen, und Rückrufe, um Rückrufe auszulösen, was dem entspricht Existenz keines Ladens.

Das Folgende ist die grobe Implementierung dieser höherwertigen Komponente:

function connect(mapStateToProps, mapDispatchToProps) {
 return function(WrappedComponent) {
 class Connect extends React.Component {
  componentDidMount() {
  // 组件加载完成后订阅store变化，如果store有变化则更新UI
  this.unsubscribe = this.context.store.subscribe(this.handleStoreChange.bind(this));
  }
  componentWillUnmount() {
  // 组件销毁后，取消订阅事件
  this.unsubscribe();
  }
  handleStoreChange() {
  // 更新UI
  this.forceUpdate();
  }
  render() {
  return (
   <WrappedComponent
   {...this.props}
   {...mapStateToProps(this.context.store.getState())} // 参数是store里面的数据
   {...mapDispatchToProps(this.context.store.dispatch)} // 参数是store.dispatch
   />
  );
  }
 }
 Connect.contextTypes = {
  store: PropTypes.object
 };
 return Connect;
 };
}
使用connect的时候，我们知道要写一些样板化的代码，比如mapStateToProps、mapDispatchToProps这两个函数：


const mapStateToProps = state => {
 return {
 count: state.count
 };
};
 
const mapDispatchToProps = dispatch => {
 return {
 dispatch
 };
};
 
export default connect(mapStateToProps, mapDispatchToProps)(Child);
 
// 上述代码执行之后，可以看到connect函数里面的
 <WrappedComponent
 {...this.props}
 {...mapStateToProps(this.context.store.getState())}
 {...mapDispatchToProps(this.context.store.dispatch)}
 />
 
// 就变成了
 <WrappedComponent
 {...this.props}
 {count: store.getState().count}
 {dispatch: store.dispatch}
 />

// Auf diese Weise verfügen die Requisiten der untergeordneten Komponente Child über zwei zusätzliche Attribute: Count und Dispatch

// count kann zum Rendern der Benutzeroberfläche verwendet werden und Dispatch kann zum Auslösen von Rückrufen verwendet werden

Ist das also in Ordnung? OK. Generieren Sie einen Rechenzentrumsspeicher durch einen Abschluss und binden Sie diesen Speicher dann an die Requisiten der obersten Ebene von React. Die Unterkomponente stellt über HOC eine Verbindung mit dem props.store der obersten Ebene her und ruft dann Daten ab, ändert Daten usw aktualisiert die Benutzeroberfläche. Hier sprechen wir hauptsächlich darüber, wie die drei miteinander verbunden sind, wie z. B. Redux-Middleware, Reduziereraufteilung, andere Verbindungsparameter usw., können Sie sich den entsprechenden Quellcode ansehen.

Das obige ist der detaillierte Inhalt vonWelche Beziehung besteht zwischen React, Redux und React-Redux?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!