Redux Thunk ist eine Middleware, die es Ihnen ermöglicht, asynchrone Aktionen in Redux zu schreiben. Hier sind die Schritte, um Redux Thunk zu verwenden:
1. Installieren Sie Redux Thunk: Sie können dies tun, indem Sie den Befehl “npm install redux-thunk” in Ihr Terminal eingeben.
2. Importieren Sie applyMiddleware und thunk aus redux und redux-thunk:
```javascript
import { createStore, applyMiddleware } from ‘redux’;
import thunk from ‘redux-thunk’;
```
3. Erstellen Sie Ihren Store mit der applyMiddleware-Funktion und geben Sie thunk als Argument an:
```javascript
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
```
Jetzt können Sie Thunks schreiben und in Ihrem Store verwenden. Ein Thunk ist eine Funktion, die eine Funktion zurückgibt, die den dispatch- und getState-Methoden des Redux-Stores als Argumente akzeptiert.
Ein einfaches Beispiel für einen Thunk könnte so aussehen:
```javascript
const fetchTodos = () => {
return function(dispatch, getState) {
fetch(‘/todos’)
.then(res => res.json())
.then(todos => dispatch({ type: ‘FETCH_TODOS_SUCCESS’, todos }))
.catch(err => dispatch({ type: ‘FETCH_TODOS_ERROR’, err }));
};
};
```
In diesem Beispiel kontaktiert der Thunk einen Server, um eine Todo-Liste zu erhalten, und sendet dann eine von zwei Aktionen ab, abhängig davon, ob der Promise erfüllt (Fetch erfolgreich) oder abgelehnt (Fehler aufgetreten) wurde.
Sie können diesen Thunk in einer Komponente verwenden, indem Sie ihn mit der dispatch-Methode Ihres Stores aufrufen:
```javascript
store.dispatch(fetchTodos());
```
Redux Thunk ist eine leistungsstarke Funktion, die es Ihnen ermöglicht, komplexe asynchrone Flüsse mit Redux zu handhaben.
