Generatoren worden in React vaak gebruikt voor complexe statusbeheer, meestal in combinatie met Redux-saga, een Redux middleware om bijwerkingen (side-effects) beter te beheren.
Hier is een voorbeeld van hoe je een generatorfunctie kunt gebruiken in React met Redux-saga:
1. Installeer `redux-saga`:
```
npm install redux-saga —save
```
1. Importeer `redux-saga` en `takeEvery` naar je applicatie:
```
import { takeEvery } from “redux-saga/effects”;
```
1. Definieer een worker functie die de daadwerkelijke gegevensverwerking zal doen:
```
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});
}
}
```
1. Definieer een watcher functie die de acties opvangt:
```
function* mySaga() {
yield takeEvery(“USER_FETCH_REQUESTED”, fetchUser);
}
```
1. In het hoofdbestand van je applicatie, registreer je saga met de saga middleware:
```
import { createStore, applyMiddleware } from ‘redux’;
import createSagaMiddleware from ‘redux-saga’;
import { Provider } from ‘react-redux’;
import mySaga from ‘./sagas’;
// maak saga middleware aan
const sagaMiddleware = createSagaMiddleware();
// mounteer het op de Store
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(mySaga);
// render de applicatie
ReactDOM.render(
);
```
Dit is een eenvoudig voorbeeld. Voor complexere applicaties zul je waarschijnlijk meerdere sagas hebben, en mogelijk verschillende watchers voor verschillende acties.
Juist omdat reducers in Redux puur synchrone functies zijn, kan je gebruik maken van middleware zoals Redux-saga die generatoren gebruikt om asynchrone acties op een meer gecontroleerde manier af te handelen.
Keep in mind, the Redux-Saga library is an advanced library which might sound complex when you’re just starting to learn React. So it would be a good idea to get comfortable with React ecosystem e.g, React, Redux, and React-Redux before venture into Redux-Saga.
