Redux Saga è una libreria utilizzata in JavaScript per gestire gli effetti collaterali (come il recupero di dati, il caching e altro) nelle applicazioni Redux. Si basa su generatori JavaScript per rendere i flussi d’azione più comprensibili e gestibili.
Ecco come utilizzare Redux Saga:
1. Installa Redux Saga
Esegui il seguente comando per installare redux-saga:
```
npm install —save redux-saga
```
o se stai usando Yarn:
```
yarn add redux-saga
```
1. Configura il middleware di Redux Saga
Per utilizzare Redux Saga, dovrai configurare il tuo store per utilizzare il middleware Saga. Puoi farlo nel tuo file di configurazione del store Redux.
```
import { createStore, applyMiddleware } from ‘redux’;
import createSagaMiddleware from ‘redux-saga’;
//creo lo saga middleware
const sagaMiddleware = createSagaMiddleware();
// connetto lo middleware al Store
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
);
// poi esegui lo saga
sagaMiddleware.run(mySaga);
```
1. Crea Saga
Una Saga in Redux Saga è una funzione generatore che gestisce gli effetti collaterali. Ecco un esempio di come si potrebbe scrivere una Saga:
```
import { call, put, takeEvery } from ‘redux-saga/effects’
// funzione per fare l’API fetch
function* fetchUser(action) {
try {
const user = yield call(Api.fetchUser, action.payload.userId);
yield put({type: ‘USER_FETCH_SUCCEEDED’, user: user});
} catch (e) {
yield put({type: ‘USER_FETCH_FAILED’, message: e.message});
}
}
// root saga
function* mySaga() {
yield takeEvery(‘USER_FETCH_REQUESTED’, fetchUser);
}
export default mySaga;
```
In questo esempio, la funzione `call()` viene utilizzata per eseguire una chiamata API e la funzione `put()` viene utilizzata per inviare un’azione quando la chiamata API ha esito positivo.
La funzione `takeEvery()` prende ogni azione specificata (`‘USER_FETCH_REQUESTED’`) e esegue la funzione generatore `fetchUser()`.
1. Connetti le azioni alle Sagas
Quando si dispone di un’azione che si desidera associare a una Saga, è possibile inviarla utilizzando `dispatch()` come si farebbe con qualsiasi altra azione Redux.
```
store.dispatch({type: ‘USER_FETCH_REQUESTED’, payload: {userId: 1}});
```
Quando questa azione viene inviata, la Saga corrispondente che sta “ascoltando” questa azione verrà eseguita.
