Skip to main content

How to use Reducers effectively ( React Redux )


Reducers are part of Redux (which is a predictable state container for JS apps). Redux is used mostly for application state management in JS frameworks / libraries. Redux maintains the state of an entire application in a single immutable state tree (object) which cannot be changed directly. To change something, a new object must be created (using actions and reducers).

So what are reducers anyway ?

Reducers are used in response to an action which is sent to the store (a single immutable store). Reducers specify how the application’s state changes while action only describe what happens. You can think of reducers like an state changer, Let’s take an example of simple application where you want display list of food dishes using React js with Redux. Now, this list will usually have 3 actions: 

i) DISHES_LOADING : which indicates dishes are been loading.

 ii) DISHES_FAILED : which indicates the application failed to fetch the dishes details.

 iii) ADD_DISHES : which indicates adding new dishes to a list.

Fig.1. ActionTypes.jsx file
Fig.2. Dishes Reducer

Here you can see we don’t mutate the state , we simply create a return the the new copies of the object. The default state returns the previous state.

But what if I had more than one reducer for my app?

You might need more than reducer for your app and you also want those reducers to have their results combined into a single object ( rather than different copies of the object ). Let’s take another reducer for comments:

Again, there will be three actions for comment: 

i) ADD_COMMENT: which will indicate adding a new comment.

ii) COMMENT_FAILED: which will indicate comment the user was trying to put failed.

iii) ADD_COMMENTS: which will add all the comments from the store.

Fig.3. Comment Reducer

Now, we need to combine these two reducers in order to create only a single new object when there is a state change. To do that use combineReducers() which generate a function that calls your reducers with the slices of the state selected according to their keys, and combines their results into a single object again.

Fig.4. Combining Reducer

This way you can easily create a reducer for your actions for the app you are creating. Always note down the actions of your component/components before you start coding, this way you need not worry about adding new actions later on.


Thank you for reading :)

Labels:

Comments

Post a Comment

Popular posts from this blog

How to use Chess com API using Python

  How to use Chess com API using Python Chess is an amazing strategy-based game and if you have been following the recent boom of online chess then welcome to the chess club. Online chess is amazing since it allows you to play with a random stranger at your level or stockfish (computer). There are many popular online chess websites like lichess.org, chess.com, playchess.com, and newly created kasparovchess.com. Today we will be seeing how to use chess.com API for getting players' stats. You can create software and get affiliates from them (check out the link below), so share it with them if you are planning to create something. Before you start make sure you have the following things: Pre-requirements Postman Anaconda or mini conda or Python idle Any text editor of your choice Pretty good? Now let’s download the JSON file that chess com developers have already made for us from here and then you import it to the Postman. This just helps you with prewritten get methods so that ...
Post a Comment
Read more

First Repeating Element | Easy | Techgig

First Repeating Element | Easy | Techgig C++ Solution First Repeating Element | Easy | Techgig C++ Solution The first repeating element is the problem that comes under the Linear Search problem under the Algorithm section. Linear Search or sequential search is a method for finding an element within a list. The algorithm works by selecting and checking each number sequentially until matched. A linear search runs in at the worst linear time and makes at most n comparisons, where n is the length of the list. If each element is equally likely to be searched, then the sequential search has an average case of (n+1)/2 comparisons, but the average case can be affected if the search probabilities for each element vary. The complexity of the linear search is as follows: The basic linear search algorithm has the following steps: Given a list L on n elements with values L0…Ln-1, and target value T, to find the index of the target T in the list L. Set i to 0. If Li = T , the search te...
Post a Comment
Read more

Data Scraping with Python 2020

Are you a regular coursera user? If yes, then you might like this python program. You can actually use the same program for similar course websites like edx, alison, udemy, etc. So, let’s start. If you have some experience with python and BeautifulSoup then you already have everything you need so make your own. The ones that don’t, follow along. Install python for your operating system. After that install requests and BeautifulSoup like this: After that, lets import the modules, and make a variable to store the url: from bs4 import BeautifulSoup import requests baseUrl = “https://www.coursera.org” Now, take an input from cli or initialize it: skillset = input().split(“ “)  Now, we’ll see the query url for the search input: example: java Fig.1. Search field in a course website Fig.2. Check the url and find a pattern So, the important part is the after the “query=” part. So, we will append the input from the user here. skillset= “%20”.join(input().split(“ “)) courseraUrl = “https://...
Post a Comment
Read more