So vereinfachen Sie Redux mit Redux Toolkit

Lernen Sie Redux Toolkit kennen, ein bewährtes Toolset für effiziente Redux-Entwicklung. In diesem Artikel erfahren Sie, warum Redux Toolkit mehr Aufmerksamkeit von der React-Community verdient.

React und Redux gelten als die beste Kombination für die Statusverwaltung in groß angelegten React-Anwendungen. Im Laufe der Zeit nahm die Popularität von Redux jedoch aus folgenden Gründen ab:

• Die Konfiguration von Redux Store ist nicht einfach.
• Wir benötigen einige Pakete, damit Redux mit React funktioniert.
• Redux erfordert zu viel Boilerplate-Code.
  

Mit diesen Fragen veröffentlichte Dan Abramov, der Erfinder von Redux, einen Artikel mit dem Titel „Vielleicht brauchen Sie Redux nicht“. Darin schlägt er vor, Redux nur bei Bedarf zu verwenden und bei der Entwicklung weniger komplexer Anwendungen andere Methoden zu verwenden.

Probleme, die Redux Toolkit löst

Redux Toolkit (früher Redux Starter Kit) bietet Optionen zum Konfigurieren eines globalen Speichers und vereinfacht das Erstellen von Aktionen und Reduzierern durch größtmögliche Abstraktion der Redux-API.

Was gehört dazu?

Redux Toolkit enthält einige nützliche Pakete wie Immer, Redux-Thunk und Reselect. Es macht React-Entwicklern das Leben viel einfacher, da es ihnen ermöglicht, den Status direkt zu verändern (ohne sich mit Unveränderlichkeit befassen zu müssen) und Middleware wie Thunk anzuwenden (das asynchrone Vorgänge verarbeitet). Es verwendet außerdem Reselect, eine einfache „Selector“-Bibliothek für Redux, um die Reducer-Funktion zu vereinfachen.

Was sind die Hauptfunktionen der Redux Toolkit API?

Im Folgenden sind die von Redux Took Kit verwendeten API-Funktionen aufgeführt, die eine Abstraktion der vorhandenen Redux-API-Funktionen darstellen. Diese Funktionen ändern die Redux-Flows nicht, sie vereinfachen sie lediglich auf eine lesbarere und handhabbarere Weise.

• configureStore: Erstellt eine Redux-Store-Instanz genau wie das ursprüngliche createStore von Redux, akzeptiert jedoch ein benanntes Optionsobjekt und richtet automatisch die Redux DevTools-Erweiterung ein.
• createAction: Akzeptiert eine Zeichenfolge vom Typ „Aktion“ und gibt eine Funktion zur Aktionserstellung zurück, die diesen Typ verwendet.
• createReducer: Akzeptiert den anfänglichen Statuswert und eine Nachschlagetabelle mit Aktionstypen für die Reducer-Funktion und erstellt einen Reducer, der alle Aktionstypen verarbeitet.
• createSlice: akzeptiert einen Anfangszustand und eine Nachschlagetabelle mit Reducer-Namen und -Funktionen und generiert automatisch Action-Creator-Funktionen, Action-Typ-Strings und eine Reducer-Funktion.

Sie können die obige API verwenden, um den Boilerplate-Code in Redux zu vereinfachen, insbesondere durch Verwendung der Methoden createAction und createReducer. Dies kann jedoch mit createSlice weiter vereinfacht werden, da dadurch automatisch Action-Creator- und Reducer-Funktionen generiert werden.

Was ist das Besondere an createSlice?

Es handelt sich um eine Hilfsfunktion, die einen Speicherbereich generiert. Es akzeptiert den Namen des Slices, den Anfangszustand und eine Reducer-Funktion, um den Reducer, die Aktionstypen und die Aktionsersteller zurückzugeben.

Sehen wir uns zunächst an, wie Reducer und Aktionen in einer herkömmlichen React-Redux-Anwendung aussehen.

Aktionen

importiere {GET_USERS,CREATE_USER,DELETE_USER} aus "../constant/constants";
export const GetUsers = (Daten) => (Versand) => {
 versenden({
 Typ: GET_USERS,
 Nutzlast: Daten,
 });
};
export const CreateUser = (Daten) => (Versand) => {
 versenden({
 Typ: CREATE_USER,
 Nutzlast: Daten,
 });
};
export const DeleteUser = (Daten) => (Versand) => {
 versenden({
 Typ: DELETE_USER,
 Nutzlast: Daten,
 });
};

Reduzierstücke

importiere {GET_USERS,CREATE_USER,DELETE_USER} aus "../constant/constants";
const initialState = {
 Fehlermeldung: "",
 wird geladen: falsch,
 Benutzer:[]
};
const UserReducer = (Zustand = Anfangszustand, {Nutzlast}) => {
Schalter (Typ) {
 Fall GET_USERS:
 return { ...Status, Benutzer: Nutzlast, Laden: false };
Fall CREATE_USER:
 return { ...Status, Benutzer: [Nutzlast, ...Status.Benutzer],
 wird geladen: false };
Fall DELETE_USER:
 return { ...Zustand, 
 Benutzer: status.benutzer.filter((Benutzer) => Benutzer-ID !== Nutzlast-ID),
, wird geladen: false };
Standard:
 Rückgabezustand;
 }
};
Standard-UserReducer exportieren;

Sehen wir uns nun an, wie Sie mit createSlice die Vorgehensweise vereinfachen und die gleiche Funktionalität erreichen können.

importiere { createSlice } von '@reduxjs/toolkit';
exportiere const initialState = {
 Benutzer: [],
 wird geladen: falsch,
 Fehler: falsch,
};
const userSlice = createSlice({
 Name: "Benutzer",
 Anfangszustand,
 Reduzierstücke: {
  getUser: (Status, Aktion) => {
   Status.Benutzer = Aktion.Nutzlast;
   Zustand.laden = wahr;
   Zustand.Fehler = falsch;
  },
  createUser: (Status, Aktion) => {
   Zustand.Benutzer.Aufheben der Verschiebung(Aktion.Nutzlast);
   Zustand.Laden = falsch;
  },
  deleteUser: (Status, Aktion) => {
   state.users.filter((Benutzer) => Benutzer-ID !== Aktion.Payload.ID);
   Zustand.Laden = falsch;
  },
 },
});
export const { createUser, deleteUser, getUser } = userSlice.actions;
Standardmäßig userSlice.reducer exportieren;

Wie Sie sehen, befinden sich jetzt alle Aktionen und Reduzierer an einem einfachen Ort. Während Sie in herkömmlichen Redux-Anwendungen jede Aktion und die entsprechende Aktion im Reduzierer verwalten müssen, müssen Sie bei Verwendung von createSlice keinen Switch verwenden, um die Aktion zu identifizieren.

Ein typischer Redux-Flow verursacht Fehler, wenn es zu einer Zustandsänderung kommt, und Sie benötigen spezielle JavaScript-Strategien wie den Spread-Operator und die Objektzuweisung, um diese zu beheben. Da Redux Toolkit Immer verwendet, müssen Sie sich keine Gedanken über die Änderung des Status machen. Da Slice Aktionen und Reduzierer erstellt, können Sie diese exportieren und in Ihren Komponenten und im Store verwenden, um Redux zu konfigurieren, ohne separate Dateien und Verzeichnisse für Aktionen und Reduzierer erstellen zu müssen, wie unten gezeigt.

importiere { configureStore } von "@reduxjs/toolkit";
importiere userSlice aus "./features/user/userSlice";
exportiere Standard configureStore({
 Reduzierer: {
 Benutzer: userSlice,
 },
});

Dieser Store kann mithilfe von useSelector und useDispatch direkt von Komponenten über die Redux-API verwendet werden. Beachten Sie, dass Sie zur Identifizierung der Operationen keine Konstanten und keine Typen verwenden müssen.

Umgang mit asynchronen Redux-Flows

Zur Verarbeitung asynchroner Aktionen stellt Redux Toolkit eine spezielle API-Methode namens „createAsyncThunk“ bereit, die einen String-Bezeichner und einen Payload-Callback akzeptiert, die eigentliche asynchrone Logik ausführt und ein Promise zurückgibt, das die Verteilung der zugehörigen Aktion basierend auf dem von Ihnen zurückgegebenen Promise und den Aktionstypen verarbeitet, die in Ihren Reducern verarbeitet werden können.

importiere Axios von „Axios“;
importiere { createAsyncThunk } aus "@reduxjs/toolkit";
exportiere const GetPosts = createAsyncThunk(
"post/getPosts", async () => warte auf axios.get(`${BASE_URL}/posts`)
);
exportiere const CreatePost = erstelleAsyncThunk(
"post/createPost", async (post) => warte auf axios.post(`${BASE_URL}/post`, post)
);

Anders als bei herkömmlichen Datenflüssen werden die von createAsyncThunk gehandhabten Aktionen vom Abschnitt „extraReducers“ innerhalb des Shards gehandhabt.

importiere { createSlice } von "@reduxjs/toolkit";
importiere { GetPosts, CreatePost } von "../../services";
exportiere const initialState = {
 Beiträge: [],
 wird geladen: falsch,
 Fehler: null,
};
exportiere const postSlice = erstelleSlice({
Name: "Beitrag",
Anfangszustand: Anfangszustand,
zusätzlicheReducer: {
  [GetPosts.fulfilled]: (Status, Aktion) => {
   Status.Beiträge = Aktion.Nutzlast.Daten;
  },
  [GetPosts.rejected]: (Status, Aktion) => {
  staat.beiträge = [];
  },
  [CreatePost.fulfilled]: (Status, Aktion) => {
  Status.Beiträge.Aufheben der Verschiebung(Aktion.Nutzlast.Daten);
  },
 },
});
exportiere standardmäßig postSlice.reducer;

Beachten Sie, dass Sie innerhalb der ExtraReducers sowohl erfüllte als auch abgelehnte Zustände verarbeiten können.

Anhand dieser Codeausschnitte können Sie sehen, wie gut dieses Toolkit Ihren Code in Redux vereinfachen kann. Ich habe zu Ihrer Information ein REST-Beispiel unter Verwendung des Redux Toolkit erstellt.

Abschließende Gedanken

Meiner Erfahrung nach ist Redux Toolkit eine gute Wahl für den Einstieg in Redux. Es vereinfacht den Code und hilft bei der Verwaltung des Redux-Status durch die Reduzierung des Boilerplate-Codes.

Und schließlich ist Redux Toolkit, genau wie Redux, nicht nur für React konzipiert. Wir können es mit jedem anderen Framework wie Angular verwenden.

Weitere Informationen finden Sie in der Dokumentation des Redux Toolkits.

Vielen Dank fürs Lesen!

Oben finden Sie Einzelheiten zur Verwendung von Redux Toolkit zur Vereinfachung von Redux. Weitere Informationen zur Verwendung von Redux Toolkit zur Vereinfachung von Redux finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!