Redux Thunk est un middleware qui permet à une action Redux d’être une fonction plutôt qu’un objet simple. Cela vous permet de créer des actions asynchrones et d’attendre les données avant de les transmettre à la fonction de réduction appropriée.
Voici comment vous pouvez l’utiliser :
1. Installer Redux Thunk :
Vous pourrez installer Redux Thunk avec npm ou yarn, comme ceci :
```
npm install redux-thunk
// ou
yarn add redux-thunk
```
1. Appliquer le middleware :
Une fois Redux Thunk installé, vous devrez l’ajouter comme middleware à votre magasin Redux. Vous pouvez le faire en utilisant la fonction `applyMiddleware` de Redux.
```
import { createStore, applyMiddleware } from ‘redux‘
import thunk from ‘redux-thunk‘
import rootReducer from ‘./reducers’
const store = createStore(rootReducer, applyMiddleware(thunk))
```
1. Créer une action asynchrone :
Après avoir ajouté Redux Thunk comme middleware à votre store, vous pouvez créer des actions asynchrones. Celles-ci sont généralement utilisées pour récupérer des données d’une API.
Voici un exemple basique d’une action asynchrone avec Redux Thunk:
```
export function fetchPosts() {
return function(dispatch) {
fetch(‘https://jsonplaceholder.typicode.com/posts’)
.then(response => response.json())
.then(posts => dispatch({
type: ‘FETCH_POSTS’,
payload: posts
}))
}
}
```
Dans cet exemple, `fetchPosts` est une fonction qui renvoie une autre fonction. Cette fonction interne reçoit la méthode `dispatch` d’un store Redux en tant qu’argument. Dans la fonction interne, nous effectuons une requête fetch, puis nous traitons la réponse et enfin nous despachons une action normale vers Redux store avec le type d’action et les données que nous voulons mettre à jour dans le state.
1. Despacher l’action :
Enfin, vous pouvez despacher l’action asynchrone depuis un composant comme vous le feriez pour une action synchrones :
```
import { fetchPosts } from ‘./actions’
// …
componentDidMount() {
this.props.dispatch(fetchPosts())
}
```
Remarque : Nous avons utilisé la fonction fetch native pour l’échange de réseau dans cet exemple, mais l’utilisation de redux-thunk n’est pas limitée à fetch. Vous pouvez utiliser tout ce qui retourne une promesse ou toute autre forme de code asynchrone.
