Redux Thunk è un middleware che consente di scrivere azioni asincrone più complesse in Redux. Di seguito è riportato un esempio di come lo si può utilizzare:
1. Prima installa redux-thunk utilizzando npm o yarn:
```
npm install redux-thunk
// OR
yarn add redux-thunk
```
1. Importa `applyMiddleware` da `redux` e `thunk` da `redux-thunk` nel tuo file di configurazione di Redux (solitamente denominato `store.js`):
```
import { createStore, applyMiddleware } from ‘redux’;
import thunk from ‘redux-thunk’;
```
1. Applica il middleware al tuo store:
```
const store = createStore(reducers, applyMiddleware(thunk));
```
1. Ora puoi scrivere delle azioni asincrone. Di seguito è riportato un esempio di azione asincrona con Redux Thunk:
```
export const fetchPosts = () => {
return function(dispatch) { // con thunk puoi ritornare una funzione invece di un oggetto
fetch(‘https://jsonplaceholder.typicode.com/posts’)
.then(response => response.json())
.then(posts => dispatch({ type: ‘FETCH_POSTS’, payload: posts }));
}
}
```
1. Infine, puoi fare il dispatch di questa azione asincrona nel tuo componente:
```
import { connect } from ‘react-redux’;
import { fetchPosts } from ‘./actions/postActions’;
class PostComponent extends React.Component {
componentDidMount() { this.props.fetchPosts(); } // … }const mapDispatchToProps = dispatch => ({
fetchPosts: () => dispatch(fetchPosts())
});
export default connect(null, mapDispatchToProps)(PostComponent);
```
Nell’esempio sopra, grazie a Redux Thunk, l’azione `fetchPosts` può ritornare una funzione invece di un semplice oggetto. Questa funzione può effettuare operazioni asincrone, come l’interrogazione di un API, e fare il dispatch di altre azioni quando queste operazioni sono concluse.
