Moderne Reaktion mit Redux

Dieser Artikel konzentriert sich auf modernes React mit einem Schwerpunkt auf der Integration von Redux in React-Anwendungen für die Zustandsverwaltung. Ich werde einige erweiterte React-Funktionen wie useCallback und nützliche VS-Code-Erweiterungen zur Steigerung der Produktivität behandeln.

Konzept-Highlights:

1. mapStateToProps
2. mapDispatchToProps
3. Vorteile des Hinzufügens von Redux zu React
4. Redux Thunk
5. Reduzierstücke
6. Selektoren
7. Reagieren Sie auf Snippets im VS-Code

1. mapStateToProps

In Redux ist „mapStateToProps“ eine Funktion, mit der Sie den Status aus dem Redux-Speicher den Requisiten der React-Komponente zuordnen können. Dadurch können Komponenten auf bestimmte Zustandsteile zugreifen.

Syntax:

const mapStateToProps = (state) => {
  return {
    data: state.data,
  },
};

z. B.) In diesem Beispiel extrahiert mapStateToProps den Zählwert aus dem Redux-Speicher und stellt ihn als Requisite innerhalb von CounterComponent zur Verfügung.

const mapStateToProps = (state) => {
  count: state.counter.count,
});

export default connect(mapStateToProps)(CounterComponent);

2. mapDispatchToProps

Ähnlich wie bei „mapStateToProps“ ordnet „mapDispatchToProps“ Versandaktionen Requisiten zu, sodass die Komponente Aktionen an den Redux-Store senden kann.

Syntax:

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
  },
};

z.B.) In diesem Beispiel stellt mapDispatchToProps incrementCount als Requisite für CounterComponent bereit, sodass es bei Aufruf die Aktion increment() auslösen kann.

const mapDispatchToProps = (dispatch) => ({
  incrementCount: () => dispatch(increment()),
});

3. Vorteile des Hinzufügens von Redux zu React

Redux kann Ihre React-Anwendung erheblich verbessern, insbesondere wenn die Anwendung komplexer wird. Hier sind die Hauptvorteile:

• Zentralisierte Zustandsverwaltung: Redux bietet eine einzige Quelle der Wahrheit, indem es den Staat in einem zentralen Speicher verwaltet. Dies erleichtert die Verwaltung von Zustandsänderungen in der gesamten App und verbessert die Vorhersagbarkeit.

• Zustandspersistenz: Redux erleichtert das Speichern und Beibehalten des Zustands über das Neuladen oder Weiterleiten von Seiten hinweg und sorgt so für eine reibungslosere Benutzererfahrung.

• Debugging und Zeitreise-Debugging: Redux DevTools ermöglicht erweitertes Debugging und lässt Sie jede Aktion und Zustandsänderung überprüfen und sogar zu früheren Zuständen zurückkehren, um Fehler zu beheben.

• Trennung von Belangen: Redux trennt den Status Ihrer Anwendung von Ihrer Benutzeroberfläche und ermöglicht so wiederverwendbareren, wartbareren und testbareren Code.

4. Redux Thunk

Redux Thunk ist eine Middleware, die es ermöglicht, Aktionsersteller zu schreiben, die Funktionen anstelle von Aktionsobjekten zurückgeben. Dadurch können wir asynchrone Vorgänge (wie API-Aufrufe) innerhalb der Redux-Aktionen durchführen.

Syntax:

 const fetchData = () => {
  return (dispatch) => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch({ type: 'FETCH_SUCCESS', payload: data }))
      .then(error => dispatch({ type: 'FETCH_ERROR', error }));
  };
};

z.B.) In diesem Beispiel ist fetchPosts eine asynchrone Aktion, die Daten von einer API abruft und Aktionen basierend auf dem Erfolg oder Misserfolg der Anfrage auslöst.

function fetchPosts() {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_POSTS_REQUEST' });
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      const posts = await repsosne.json();
      dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: posts });
    } catch (error) {
      dispatch({ type: 'FETCH_POSTS_ERROR', error });
    }
  };
}

5. Reduzierstücke

Reduzierer sind reine Funktionen in Redux, die den aktuellen Zustand und eine Aktion als Argumente nehmen und basierend auf der Aktion einen neuen Zustand zurückgeben. Reduzierer sind für die Aktualisierung des Status im Redux-Store verantwortlich.

Syntax:

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT': 
      return { count: state.count + 1 };
    case 'DECREMENT': 
      return { count: state.count - 1 };
    default: 
      return state;
  }
}

z.B.) In diesem Beispiel verarbeitet der counterReducer zwei Aktionen, INCREMENT und DECREMENT, und aktualisiert die Anzahl im Status entsprechend.

const rootReducer = combineReducers({
  counter: counterReducer,
});

const store = createStore(rootReducer);

6. Selektoren

Selektoren sind Funktionen, die zum Extrahieren oder Berechnen abgeleiteter Zustände aus dem Redux-Speicher verwendet werden. Sie verbessern die Leistung, indem sie Ergebnisse speichern und eine klare API für den Zugriff auf Teile des Status bereitstellen.

Syntax:

const selectCount = (state) => state.counter.count;

z.B.) In diesem Beispiel ist „selectUserPosts“ ein gespeicherter Selektor, der Beiträge basierend auf der ID des aktuellen Benutzers filtert. Selektoren können Ihren Code effizienter machen, indem sie unnötige Neuberechnungen vermeiden.

const selectUserPosts = createSelector(
  [state => state.posts, state => state.userId],
  (posts, userId) => posts.filter(post => post.userId === userId)
};

7. Reagieren Sie auf Snippets im VS-Code

Wenn Sie in VS Code programmieren, kann die Installation der Erweiterung React Snippets Ihren Arbeitsablauf erheblich beschleunigen. Diese Erweiterung bietet praktische Verknüpfungen zum Erstellen von Komponenten, Hooks und anderen gängigen React-Codestrukturen und hilft Benutzern, durch die Nutzung von Codevorlagen schneller sauberen und konsistenten React-Code zu schreiben.

z. B.) Durch den Versuch von rfc, rafc oder rafce gefolgt von der Tabulatortaste wird der folgende Code für eine React-Funktionskomponente generiert:

import React from 'react'

const ComponentName = () => {
  return (
    <div>

    </div>
  )
}

Das obige ist der detaillierte Inhalt vonModerne Reaktion mit Redux. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!