Implement Redux-Saga in your React TypeScript Project.

In this article, I will be explaining what is redux-saga and how to implement it in your personal project so what is redux-saga?

Introduction

Redux-Saga is a library that aims to make application side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier to manage, more efficient to execute, easy to test, and better at handling failures.

The mental model is that a saga is like a separate thread in your application that’s solely responsible for side effects so basically it is a redux middleware, which means this thread can be started, paused, and canceled 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.

It uses an ES6 feature called Generators to make those asynchronous flows easy to read, write and test. By doing so, these asynchronous flows look like your standard synchronous JavaScript code. (kind of like async/await, but generators have a few more awesome features we need) , if you don't know much about generator functions I did write an article about it so click here.

Enough introductions let's Code!

Note: in the next steps I will be avoiding creating types therefore I will link a code sandbox for if you are looking for types or you want to skip.

Step 1 : Create React App

So basically we will be creating a React Typescript project first!

yarn create react-app my-app --template typescript

Step 2 : Install Redux / Redux-Saga

So we will be installing redux / redux-saga and their types since we are using TypeScript.

yarn add redux react-redux redux-saga @types/react-redux @types/redux-saga

Step 3 : Creating store

So we will be creating a file called Store.ts.

A store holds the whole state tree of your application.

the store is the result of executing the createStore function that takes as a first argument our rootReducer which is a combination of all the reducer in our app and of course our middleware as a second argument.

rootSaga will be all of the combinations of all sagas that we will have in our application.

Step 4 : Creating reducers

As usual, we will start with creating our file rootReduer.ts inside a folder called reducers.

as u can see we already imported a postReducer so we will be creating that as well.

As you can see we will be creating 3 cases in this reducer: fetch, success and failure.

Step 5 : Creating Actions

After creating our reducer we know how to create our actions, so we will be doing the following.

So if you are familiar with using redux-thunk, you will be wondering how to call all these 3 actions at once! Therefore we will move to the next step of creating our Saga.

Step 6 : Creating Sagas

So here comes the fun part where we will be using generator functions to handle side effects from our fetch request instead of using callback functions in redux-thunk.

Step 7 : Creating our root Saga

this is where we will import all the sagas needed in our applications so we will do the following.

Step 8 : Testing it out

So we will be adding our store with a provider in our index.tsx.

and finally using it in our app.tsx so we will fetch the data using useSelector hook and dispatching our action which is fetching posts using useDispatch hook.

And that's it you can check the app in actions in the provided code sandbox in the Introduction!

Q&A

If something doesn’t work as expected or needs more details, just drop a comment below :) Happy coding!

This has been developed by myself at eDonec.