Redux Saga is a middleware library that handles side effects ( like asynchronous codes ) in your application.
What exactly are side effects?
A side effect is a block of code that does not return the same output, each time you call it with the same parameters.
Examples of such side effects we aim to handle effectively with our Redux-saga are:
• Fetching data from a server • Logging • Saving to browser local storage.
Getting Started
Before we dive in head first into using Redux-saga, Redux-saga requires you to have an understanding of generator functions , luckily I have written an article on that and you can find it right here %[ amara.hashnode.dev/generator-functions ]
• Install the Redux-Saga library.
npm install --save redux-saga
Or
yarn add redux-saga
• Import the Saga middleware in our store.js.
Import createSagaMiddleware from ‘redux-saga';
const sagaMiddleware = createSagaMiddleware();
export const store = createStore(rootReducer , applyMiddleware( sagaMiddleware ));
sagaMiddleware.run();
In this sagaMiddleware.run() method we pass in as a parameter all the sagas we would later want to run.
HELPERS
• take • takeEvery • takeLatest • put • call
take
//saga.js
import { take } from ‘redux-saga/effects';
function* fetchData(){
yield take(‘FETCH_DATA' );
\\ line where the asynchronous code is supposed to go
}
The take redux saga helper takes the action and runs the line of asynchronous code next. The take helper however, is different from other helpers in the way that it is blocking and only runs once, as sagas do not go back into the function to run the asynchronous code again.
To run the line of code every time the action fires however we make use of the while loop.
takeEvery
import { takeEvery } from ‘ redux-saga/effects ‘;
function* consumeApI(){
\\ line of asynchronous code
}
function* fetchData(){
yield takeEvery(‘FETCH_DATA', consumeAPI)
}
The takeEvery helper takes in 2 parameters, the action to watch out for and the given sag it wants to run. The take helper non-blocking and will run the consumeAPI function concurrently.
Unlike the take helper the consumeAPI function will run everytime the action fires infinitely .
takeLatest
This helper is a lot like the takeEvery only that it runs the generator function once, the latest one at that and cancels the all previous functions running.
put
The put helper is used to dispatch an action into the Redux store.
call
This is used to run functions in a saga . The call keyword takes in 2 parameters. One, the function we are trying, the second the parameters you want to pass into the function.
call( functionToRun, params )
all
Now if we decided to run multiple functions or saga individually with the call keyword as so:
Import { call } from ‘redux-saga/effects';
const firstFunction = yield call( functionOne , params );
const secondFunction = yield call( functionTwo, params );
The functions above are not running concurrently, the firstFunction runs first and returns a value before the secondFunction starts.
To run them concurrently however we pass them as parameters in an all helper.
import { call, all } from ‘redux-saga/effects';
const functions = yield all([
call( functionOne, params ),
call( functionTwo, params )
])
race
The race differs from the all in that although it runs the functions concurrently, it cancels the other functions as soon as one function resolves.