Manju

Greetings! In a previous article , I talked about redux architecture with reactjs a bit. In this article, I talk about handling side effects with redux-saga. The complete code for this article is here . What is redux-saga? Redux saga is a side effect manager using ES6 generators. Therefore it gives the added benefit of easy testability. What do we build? To demonstrate the architecture, let's create a simple GitHub user application where we fetch GitHub handle for a given username. For example, this gives my GitHub account information. https://api.github.com/users/slmanju Initialize the project create-react-app react-redux-saga-example cd react-redux-saga-example npm install redux react-redux reselect npm install redux-saga npm install axios Util to fetch actual data Let's create a little util for HTTP calls using axios. import axios from "axios"; const withError = (promise) => promise.then((data) => [null, data]).catch((err) => [err]); export const

Greetings! Redux is described as a predictable state container for JS Apps (in the docs) and a few more features. What we need to realize is that it gives a single source of truth for our JavaScript applications. Instead of saving our global states in multiple places, we manage them in a centralized location. That is it! Let's jump. Single source of truth Share data across multiple places The source code for this article can be found here . The redux architecture It is this redux architecture we need to understand. After that, it is how to accomplish it in reactjs way. view - any part of the user interface action - what sort of thing the user did in the user interface? reducer - this is where the data manipulation happens. It captures the action and acts upon that, updates the store store - this is where the all data is saved just like a database These are the main players we need to know, we need to understand. Next, we will use the react-redux