Installation von Redux und RTK in eine React-Anwendung

Auf dieser Lektion installieren wir in unserer Anwendung das Paket React-Redux, das es React-Komponenten ermöglicht, in Verbindung mit Redux zu arbeiten, und das Tool Redux Toolkit (abgekürzt RTK).

Öffnen wir unser Projekt und geben im Terminal folgenden Befehl ein:

npm install @reduxjs/toolkit react-redux

Jetzt müssen wir den Store erstellen, in dem der globale Zustand unserer Anwendung gespeichert wird. Zunächst erstellen wir im Ordner src einen Ordner app, und darin eine Datei store.js. Dann müssen wir in diese Datei configureStore aus RTK importieren:

import { configureStore } from '@reduxjs/toolkit'

Als nächstes erstellen wir einen leeren Store und übergeben mindestens einen Reducer:

export default configureStore({
	reducer: {}
});

Damit unsere React-Komponenten mit dem Store arbeiten können, machen wir Folgendes. Gehen wir in unsere Datei main.jsx, in der bereits Code enthalten ist:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
)

In den Import fügen wir Zeilen mit dem im vorherigen Schritt erstellten store und der Komponente Provider hinzu:

import store from './app/store'
import { Provider } from 'react-redux'

Dann wickeln wir unsere Hauptkomponente App in Provider ein und übergeben ihr als Prop den store:

<React.StrictMode>
	<Provider store={store}>
		<App />
	</Provider>
</React.StrictMode>

Und schließlich platzieren wir in der Haupt-React-Komponente App folgenden Code:

function App() {
	return <h2>This is my first Redux app!</h2>
}

export default App

Wir starten unser Projekt erneut und sehen im Browserfenster: 'This is my first Redux app!'. Die Warnung über das Fehlen eines gültigen Reducers ignorieren wir vorerst. Es hat alles geklappt, herzlichen Glückwunsch :).

Installieren Sie Redux und RTK in Ihrer Anwendung, wie in der Lektion beschrieben. Stellen Sie sicher, dass Ihre Anwendung funktioniert.