Verwenden des Redux Toolkits mit React: Eine einfache Anleitung

Redux Toolkit ist die offizielle, empfohlene Methode zum Schreiben von Redux-Logik. Es bietet sofort gute Standardeinstellungen für die Shop-Einrichtung und enthält die am häufigsten verwendeten Redux-Add-ons integriert. In diesem Blog gehen wir durch die Grundlagen der Integration von Redux Toolkit mit einer React-Anwendung.

Was ist Redux Toolkit?

Redux Toolkit ist eine Reihe von Tools, die dabei helfen, den Prozess des Schreibens von Redux-Logik zu vereinfachen. Es enthält Dienstprogramme zur Vereinfachung gängiger Anwendungsfälle wie der Store-Einrichtung, der Erstellung von Reduzierern und dem Schreiben unveränderlicher Update-Logik.

---

Redux Toolkit mit React einrichten

Lassen Sie uns die Schritte zum Einrichten des Redux Toolkits in einer React-Anwendung durchgehen.

Schritt 1: Abhängigkeiten installieren

Zuerst müssen Sie die erforderlichen Pakete installieren. Sie können dies mit npm oder Garn tun.

npm install @reduxjs/toolkit react-redux

Schritt 2: Erstellen Sie einen Redux Store

Der Store ist das Objekt, das Redux zum Leben erweckt. Mit Redux Toolkit können Sie mithilfe der configureStore-Funktion einen Store erstellen.

// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

Schritt 3: Erstellen Sie ein Slice

Ein Slice ist eine Sammlung von Redux-Reduziererlogik und -Aktionen für eine einzelne Funktion Ihrer App. Die Funktion createSlice des Redux Toolkits generiert automatisch Aktionsersteller und Aktionstypen.

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

Schritt 4: Stellen Sie den Store für Ihre React-Anwendung bereit

Um den Redux-Store für Ihre React-Komponenten verfügbar zu machen, müssen Sie die Provider-Komponente von React-Redux verwenden.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Schritt 5: React Components mit dem Redux Store verbinden

Um eine React-Komponente mit dem Redux-Store zu verbinden, können Sie die Hooks useSelector und useDispatch von React-Redux verwenden.

// src/components/Counter.jsx
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../features/counter/counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default Counter;

Schritt 6: Verwenden Sie die verbundene Komponente in Ihrer App

Endlich können Sie die verbundene Komponente in Ihrer Anwendung verwenden.

// src/App.js
import Counter from './components/Counter';

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;

---

Abschluss

Indem Sie diese Schritte befolgen, können Sie Redux Toolkit in Ihrer React-Anwendung einrichten, um den Status auf vorhersehbare und wartbare Weise zu verwalten. Das Redux Toolkit vereinfacht viele der allgemeinen Aufgaben bei der Arbeit mit Redux und erleichtert das Schreiben und Verwalten Ihrer Redux-Logik.

---

Weitere Erkundung

Für diejenigen, die tiefer in Redux Toolkit und React eintauchen möchten, finden Sie hier einige wertvolle Ressourcen:

• Redux Toolkit-Dokumentation: Die offizielle Dokumentation bietet umfassende Anleitungen und API-Referenzen.
  • Redux Toolkit-Dokumentation
• React Redux-Dokumentation: Erfahren Sie mehr über die Verwendung von Redux mit React.
  • React Redux-Dokumentation
• Redux Essentials-Tutorial: Eine Schritt-für-Schritt-Anleitung, die Ihnen den Einstieg in das Redux Toolkit erleichtert.
  • Redux Essentials-Tutorial
• Redux Fundamentals Tutorial: Ein detailliertes Tutorial, das die Kernkonzepte von Redux abdeckt.
  • Redux-Grundlagen-Tutorial

Danke fürs Lesen!
Po.

Das obige ist der detaillierte Inhalt vonVerwenden des Redux Toolkits mit React: Eine einfache Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!