Redux Saga is een library die helpt om side effects (zoals asynchrone taken zoals data fetching en impure functies zoals toegang tot de browser cache) in je Redux applicaties gemakkelijker en leesbaarder te maken.
Volg deze stappen om Redux Saga te gebruiken:
1. Installeer Redux Saga: met npm:
```
npm install —save redux-saga
```
of met yarn:
```
yarn add redux-saga
```
1. Maak je Sagas: Sagas in Redux Saga zijn generator functies (functies die de `function*` syntax gebruiken en resultaten van `yield` expressies teruggeven). Elke saga representeert een long-running taak.
Bijvoorbeeld, als je een api call wil maken wanneer een actie `USER_FETCH_REQUESTED` wordt dispatched kan je volgende saga maken:
```
import { call, put, takeEvery } from ‘redux-saga/effects‘
import Api from ‘…’
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});
}
}
function* mySaga() {
yield takeEvery(“USER_FETCH_REQUESTED”, fetchUser);
}
export default mySaga;
```
1. Verbind je Saga met de Redux Store: Om de Saga(s) te starten moet je ze verbinden met de Redux store met behulp van `sagaMiddleware.run()` in de opstart configuratie van je applicatie.
```
import { createStore, applyMiddleware } from ‘redux‘
import createSagaMiddleware from ‘redux-saga’
import reducer from ‘./reducers‘
import mySaga from ‘./sagas’
// maak de saga middleware aan
const sagaMiddleware = createSagaMiddleware()
// monteer het op de Store
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
)
// dan runnen we de saga
sagaMiddleware.run(mySaga)
// render de applicatie
```
Let op: Redux Saga gebruikt ES6 features zoals generator functies. Zorg ervoor dat je de juiste tools en configuratie hebt voor compilatie en transpilatie.
