Bij het werken met Redux, ga je vaak te maken krijgen met asynchrone acties, zoals API aanroepen of het lezen van data uit de database. Redux, van zichzelf, kan alleen synchrone updates aan de store afhandelen. Wanneer je een actie uitvoert in Redux, verwacht het meteen een nieuw object terug om de store mee bij te werken. Om in staat te zijn om asynchrone acties uit te voeren, hebben we aanvullende tools nodig, zoals Redux Thunk of Redux Saga.
1. Redux Thunk:
Redux Thunk is een middleware die je in staat stelt om functies te returnen in plaats van alleen objecten in je acties. Deze functies kunnen dan asynchrone acties uitvoeren en de Redux store updaten wanneer deze acties voltooid zijn.
Voorbeeld:
```
function fetchPosts() {
return function(dispatch) {
dispatch(requestPosts());
return fetch(`https://example.com/posts.json`)
.then(response => response.json())
.then(json => dispatch(receivePosts(json)))
.catch(error => dispatch(failedPosts(error)));
}
}
```
1. Redux Saga:
Redux Saga is een meer uitgebreide tool die gebruikmaakt van ES6 features, genaamd generatoren, om het makkelijker te maken om asynchrone acties uit te voeren. Het zorgt voor een centrale plek waar al je asynchrone logic wordt afgehandeld, wat het overzichtelijker maakt.
Voorbeeld:
```
import { call, put, takeEvery } from ‘redux-saga/effects‘
import Api from ‘…’
function* fetchPosts(action) {
try {
const posts = yield call(Api.fetchPosts);
yield put({type: “POSTS_RECEIVED”, posts: posts});
} catch (e) {
yield put({type: “POSTS_REQUEST_FAILED”, message: e.message});
}
}
function* mySaga() {
yield takeEvery(“FETCH_POSTS”, fetchPosts);
}
export default mySaga;
```
Zowel Redux Thunk als Redux Saga kunnen asynchrone bijwerkingen in Redux effectief afhandelen. De keuze tussen hen hangt af van je voorkeur en de complexiteit van je project.
