Redux-Saga is a library that aims to make side effects (i.e. asynchronous things like data fetching, impure procedures such as accessing the browser cache) in Redux-based applications easier and better to handle. It accomplishes this using an ES6 feature called Generators, allowing us to write asynchronous code that looks synchronous, and is very easy to test.
To use Redux-Saga, you need to follow several steps. First, you have to install it using npm or Yarn:
npm install redux-saga
yarn add redux-saga
Second, you create sagas to handle the side effects in your application. A basic saga could look like this:
import { call, put, takeEvery } from 'redux-saga/effects';
function* fetchUser(action) {
try {
const user = yield call(Api.fetchUser, action.payload.userId);
yield put({type: "FETCH_USER_SUCCESS", user: user});
} catch (e) {
yield put({type: "FETCH_USER_FAILURE", message: e.message});
}
}
This saga watches for every FETCH_USER_REQUEST action and triggers fetchUser function.
For step three, you run your saga. You create the Redux store as before, but also apply the sagaMiddleware:
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import { fetchUserSaga } from './sagas';
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(fetchUserSaga);
This is a simple example. Depending on your needs, you would have to structure your sagas in a way that makes sense for your application, setup error handling, etc.
The documentation for Redux-Saga can be found on their official website. The docs are comprehensive and they cover everything from basic usage, advanced concepts, extensive API reference, testing methodology, and numerous examples. The Redux-Saga community is actively maintaining these docs, making sure they remain updated and relevant to always offer help to developers at all levels.
