ReactJS - Redux: Ein Anfängerleitfaden

Hallo da, ambitionierter Entwickler! Ich freue mich sehr, dein Guide auf dieser aufregenden Reise in die Welt von ReactJS und Redux zu sein. Als jemand, der seit Jahren Informatik unterrichtet, habe ich unzählige Schüler erleuchtet sehen, als sie diese Konzepte endlich verstanden haben. Also tauchen wir ein und zaubern wir ein bisschen Magie!

Was ist Redux?

Bevor wir uns dem Code zuwenden, lassen Sie uns verstehen, was Redux eigentlich ist. Stellen Sie sich vor, Sie organisieren eine große Party (das ist Ihre App), und Sie müssen alle Gäste, das Essen und die Musik (das ist der Zustand Ihrer App) im Auge behalten. Redux ist wie Ihr superstarker Partyplaner, der alles an einem zentralen Ort organisiert.

Redux ist eine Zustandsverwaltungslibrary, die Ihnen hilft, die Daten in Ihren React-Anwendungen effektiver zu verwalten. Es ist besonders nützlich für größere Anwendungen, bei denen das Übertragen von Daten zwischen Komponenten kompliziert werden kann.

Kernkonzepte von Redux

Lassen Sie uns die Hauptkonzepte von Redux herunterbrechen:

1. Store

Der Store ist wie ein großer Behälter, der den gesamten Zustand Ihrer Anwendung enthält. Es ist die einzige Wahrheitsquelle für die Daten Ihrer App.

2. Aktionen

Aktionen sind wie Nachrichten, die dem Store mitteilen, was in Ihrer App passiert ist. Sie sind einfache JavaScript-Objekte, die eine type-Eigenschaft haben müssen.

3. Reducer

Reducer sind Funktionen, die angeben, wie der Zustand der App auf Aktionen reagiert. Sie nehmen den aktuellen Zustand und eine Aktion als Argumente und geben einen neuen Zustand zurück.

4. Dispatch

Dispatch ist eine Methode, die Aktionen an den Store sendet, um den Zustand zu aktualisieren.

Nun sehen wir diese Konzepte in Aktion mit einigen Codebeispielen!

Einrichten von Redux

Zuerst müssen wir Redux und React-Redux installieren:

npm install redux react-redux

Nun erstellen wir eine einfache Counter-Anwendung, um zu zeigen, wie Redux funktioniert.

Erstellen des Stores

import { createStore } from 'redux';

// Dies ist unser Reducer
const counterReducer = (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
};

// Erstellen des Stores
const store = createStore(counterReducer);

In diesem Beispiel erstellen wir einen Store mit einem einfachen Counter-Reducer. Der Reducer horcht auf 'INCREMENT' und 'DECREMENT'-Aktionen und aktualisiert den Zustand entsprechend.

Definieren von Aktionen

// Action Creators
const increment = () => ({ type: 'INCREMENT' });
const decrement = () => ({ type: 'DECREMENT' });

Dies sind unsere Action Creators. Sie geben Aktionsobjekte zurück, auf die unser Reducer reagieren wird.

Verwenden des Provider-Komponenten

Der Provider-Komponente macht den Redux-Store für alle verschachtelten Komponenten zugänglich, die auf den Redux-Store zugreifen müssen.

import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import counterReducer from './reducers';
import App from './App';

const store = createStore(counterReducer);

const Root = () => (
<Provider store={store}>
<App />
</Provider>
);

export default Root;

Dieser Code umgibt unsere Haupt-App-Komponente mit dem Provider, wodurch alle Komponenten Zugang zum Store erhalten.

Verbinden von Komponenten mit Redux

Nun erstellen wir ein Counter-Komponente, das unseren Redux-Store verwendet:

import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = ({ count, increment, decrement }) => (
<div>
<h2>Zähler: {count}</h2>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);

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

const mapDispatchToProps = {
increment,
decrement,
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Lassen Sie uns das einmal durchgehen:

1. Wir importieren connect von react-redux, das uns ermöglicht, unsere Komponente mit dem Redux-Store zu verbinden.
2. mapStateToProps sagt Redux, wie der Zustand auf Props in unserer Komponente abgebildet werden soll.
3. mapDispatchToProps lässt uns unsere Action Creators auf Props abbilden.
4. connect umgibt unsere Komponente, indem es den Zustand und die Action Creators als Props injiziert.

Redux API Methoden

Hier ist eine Tabelle einiger wichtiger Redux API Methoden:

Methode	Beschreibung
createStore(reducer, [preloadedState], [enhancer])	Erstellt einen Redux Store
combineReducers(reducers)	Kombiniert mehrere Reducer in eine einzelne Reduzierfunktion
applyMiddleware(...middlewares)	Wendet Middleware auf die Dispatch-Methode des Redux Stores an
bindActionCreators(actionCreators, dispatch)	Verwandelt ein Objekt, dessen Werte Action Creators sind, in ein Objekt mit den gleichen Schlüsseln, aber mit jedem Action Creator, der in einen Dispatch-Aufruf eingebettet ist

Fazit

Und da haben Sie es! Wir haben die Grundlagen von Redux behandelt, von der Verständigung der Kernkonzepte bis zur Implementierung in einer React-Anwendung. Behalten Sie im Gedächtnis, dass Redux am Anfang vielleicht etwas komplex erscheinen mag, aber wenn Sie es einmal gelernt haben, werden Sie sich fragen, wie Sie jemals ohne ausgekommen sind!

Während Sie Ihre Reise fortsetzen, werden Sie mehr fortgeschrittene Funktionen von Redux entdecken, wie Middleware und asynchrone Aktionen. Aber für jetzt, gratulieren Sie sich selbst - Sie haben Ihre ersten Schritte in eine größere Welt der Zustandsverwaltung gemacht!

Weiters kodieren, weiter lernen und vor allem: weiter Spaß haben! Bis zum nächsten Mal, viel Erfolg beim Reduxen!

Credits: Image by storyset