Redux-saga-boilerplate

Prerequisites:

Basic knowledge of reactjs, redux and asynchronous api call is required.
Go through these official documentations for more information : reactjs, redux, react-routing, redux-saga.

NodeJS & npm Installed on local system.
Any IDE to make the changes in code. (I Prefer VSCode.)
Postman to call/ensure the API response

Dependencies :

• react
• react-DOM
• redux
• redux-saga
• react-Redux
• react-Router
• react-Router-dom
• redux-form
• reactstrap
• styled-components

Functionalities:

I have tried to build the basic application to fetch the data using redux-saga and pass the data to another component.
Showing the data to the users for better visualization, I have used reactstrap library which is basically bootstrap for reactjs. I have also implemented redux-form for adding and updating the data which is necessary in any application at some point of time.

All of this functionalities are implemented with redux store and redux-saga, which we will go through in this blog as we follow.

What is redux-saga ?

Redux-saga is a thread in your application which is responsible for side effects.

redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal redux actions, it has access to the full redux application state and it can dispatch redux actions as well.

Sagas are implemented using Generator functions that yields objects to the saga-middleware. Sagas logic is expressed through plain javascript objects and those objects are known as Effects.

To start the example, I assume you have knowledge about create-react-app and how it creates structure for react application.

We’ll add dependencies as we requires to add redux, routing, reactstrap, styled-components for designing.

For redux-saga, we will add the dependency as below.

Installation :

npm install redux-saga — save

To enable the redux-saga, we have to provide it to the redux store as middleware through createSagaMiddleware method.

To make forms for adding and updating data, redux-form is added to the dependency list in the package.json.

Effects :

Effects are plain JavaScript objects which contain instructions to be fulfilled by the middleware. When a middleware retrieves an Effect yielded by a Saga, the Saga is paused until the Effect is fulfilled.

An Effect is an object that contains some information to be interpreted by the middleware. You can view Effects like instructions to the middleware to perform some operation (e.g., invoke some asynchronous function, dispatch an action to the store, etc.).

To create Effects, you use the functions provided by the library in the redux-saga/effects package.

fork → Performs a non-blocking operation on the function passed.

take → Pauses until action received.

race → Runs effects simultaneously, then cancels them all once one finishes.

call → Runs function. If it returns a promise, pauses the Saga until resolved.

put → Dispatches an action.

select → Runs a selector function to get data from the state.

takeLatest → Executes the operation, returns only the results of the last call.

takeEvery → Will return results for all the calls triggered.

Structure of the application looks like below:

Structure of the application

src folder will contain all the files and folders needed for the application.

All of the saga code is resided in saga folder which connects with the redux store to store file.

components has all the basic react components.

routes.js has configuration for all routes accessed through the application.

Implementation:

I have used Github public API which can be found here, which provides list of users of github with few basic details. If you have your own built API, you can use it, otherwise this is also a good option to use public API.

Github URL : redux-saga-CRUD Repository.

Please ‘Clap’ if you find this interesting and helpful.