Redux Saga est une bibliothèque JavaScript pour gérer les effets secondaires dans les applications redux comme les appels d’API, l’accès au navigateur ou le stockage de données.
Les étapes suivantes vous guident sur l’utilisation de Redux Saga :
1. Installation de Redux Saga: Vous pouvez installer Redux Saga en utilisant npm ou yarn.
Avec npm: \`\`\` npm install —save redux-saga \`\`\` Ou avec yarn: \`\`\` yarn add redux-saga \`\`\`1. Création d’un Saga: Un Saga est une fonction de générateur JavaScript qui utilise des effets Yield pour gérer les actions asynchrones.
Par exemple, vous pouvez créer un Saga pour gérer une action de chargement de données depuis une API. \`\`\`javascript import { call, put, takeEvery } from ‘redux-saga/effects’ 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; \`\`\` Cette Saga déclenche une action `USER_FETCH_SUCCEEDED` lorsqu’elle est réussie et `USER_FETCH_FAILED` lorsqu’elle échoue.1. Connecter le middleware Saga à Redux: Pour utiliser votre Saga, vous devez le connecter à Redux en utilisant un middleware Saga.
\`\`\`javascript import { createStore, applyMiddleware } from ‘redux’; import createSagaMiddleware from ‘redux-saga’; import rootReducer from ‘./reducers’; import mySaga from ‘./sagas’; const sagaMiddleware = createSagaMiddleware(); const store = createStore(rootReducer, applyMiddleware(sagaMiddleware)); sagaMiddleware.run(mySaga); \`\`\`1. Déclencher les Sagas avec des actions: Maintenant que vos Sagas sont connectées à Redux, elles attendent que les actions correspondantes soient déclenchées.
Par exemple, l’action `USER_FETCH_REQUESTED` déclenche le `fetchUser` Saga: \`\`\`javascript store.dispatch({type: “USER_FETCH_REQUESTED”, payload: {userId: 1}}); \`\`\` N’oubliez pas, Redux Saga utilise des fonctions génératrices pour rendre les effets secondaires asynchrones plus faciles à gérer.