DEV Community: Abhiram Reddy

React-Redux

Abhiram Reddy — Sun, 05 Jul 2020 12:46:20 +0000

What is Redux?

Simply put, Redux is a layer on top of React which helps in state management. Redux is mainly used in applications which rely on using class-based components. Redux has two tasks and they are:

creating a central data store for all the data in the application
providing access to the data for all the components.

Redux makes state management really easy. Let me illustrate with an example. Let's say that we have two components nested in different parent components. However, they need access to the same data. This would be a cumbersome process if you do it the conventional way. And that is to pass down props to the various components until it trickles down all the way to the ones that require it.

How Does Redux Work?

Redux works in 4 simple steps:

A Redux store needs to be created where we store all the data (just as the name suggests).
Components subscribe to the data in the store so that it can be used by them.
Whenever we want to update the state, we need to dispatch an action. Ex. You want to delete a list item when you click on it. So, in the callback function which deals with the onClick event, we dispatch an action to the reducer, which is like the manager of the store. Only the reducer has access to the store. We can also pass additional data along with the action.
Based on the type of the action, the reducer carries out different assignments. Continuing with the previous example, if the action type was 'DELETE_ITEM', the reducer is told what to do to deal with this action. And in our case, it would be to delete a specific item from an array structure (probably based on its ID).
Now, once the action is carried out, the store is swiftly updated. And in turn, the components which subscribed to the data which also get updated.

Now, let's see how we can use Redux in an actual application.

How to Use Redux

Firstly, we will need to install 2 npm packages. And they are:

redux (to create store)
react-redux (to connect the store with the application)

Then, we will create the store in the index.js file. This is because index.js is the file that starts the application.

We pass the rootReducer (the main reducer) as an argument when we are creating the store. This is to specify that this reducer is the one that has access to the store.

In a component, to connect to the store, we need to import a function called connect. Connect, on being invoked, returns a higher order component (HOC) which we wrap around the component. We pass a function, mapStateToProps, in which we specify the data form the store that we want to subscribe to.
We can also pass a second function which we use to dispatch an action and is called mapDispatchToProps. A method is added to the props of the components and is called whenever a certain DOM event is triggered. Then, the action gets dispatched and passed into the reducer.

Initially the state is empty. So, we must define an initial state in the reducer. In the reducer, we must write conditions for what must occur when an action of a specific type is dispatched.

Thanks for Reading!

And that's it! Redux is a topic that many developers struggle to grasp. But, once you get the hang of it, you realize what a great tool it is.
If there's anything you would like to discuss, you can contact me on any one of my social handles. I would love to hear from you!
Twitter: @nrabhiram
LinkedIn: Abhiram Reddy
Instagram: @nr_abhiram

Why is React so Popular?

Abhiram Reddy — Sun, 05 Jul 2020 11:33:37 +0000

What is React?

First of all, what is React? We've all probably heard of it at least once if we've been in touch with the tech industry (either that or you've been living under a rock) but what does it do? This question has bothered me for quite some time and I feel that now, I understand its popularity a little. I thought it would be cool to share my take on this with others, so here goes!

React is a Javascript framework created by Facebook and a community of developers. And like any other framework, its purpose is to allow the developer to accomplish more by removing the tedious parts of coding. This in turn, allows one to accomplish more tasks with lesser lines of code. Pretty cool, I know.
But the main reason why I feel that React is extremely popular is because of the large and supportive community it has amassed.

My Favorite React Features

Here are 3 of the things that I found really useful in React:

Single Page Applications (SPA's)
React-Router
State Management

Single Page Applications

Before the advent of SPA's, Multiple Page Applications (MPA's) were widely used. Let's first see how MPA's work so that we can understand how useful SPA's are.

How do MPA's Work?

In MPA's, if you want to go to another page, a request is first sent to the server. Then, the server responds by providing the required page.
For example, let's say you go to a website. Now, you want to check the contact page. So, you click on the link in the navigation bar. When this occurs, a request is sent to the server that the user wants to see the contact page. So, the server sends the required page back to the user, which in our case will probably be contact.html.

How do SPA's Work?

In SPA's, there is only one page, i.e, index.html. When you want to go to another page, the server provides the same page but with a different component injected into it.

React-Router

But, the server provides the same page for every request. So, it doesn't make sense to send a request every time to the server. That is why we use the React Router. The router intercepts the request and sends the required component in response. This also prevents the page from reloading every time you go to a new page.

State Management

In React, Components are either one of two types:

Class-Based Components
Functional Components

A component can share the data it contains with other components by adding them as properties to the props object.
This becomes tedious when you are dealing with a large application. So there are tools like Redux which make state management a lot easier.
However, recently, a new concept of Context API and hooks has been introduced and it is an even more convenient way to manage the state. I'll try covering both these concepts in one of my upcoming blog posts!

Thanks for Reading!

Personally, I feel that React is a very easy framework to pick up. There's also a huge demand for React developers so I think that you should definitely give it a shot!
I hope that I've been able to provide you with a clearer picture of why React is so widely used. If you have anything to discuss or would like to leave a suggestion, you can contact me on any one of my social handles. I would love to hear from you!

Twitter: @nrabhiram
LinkedIn: Abhiram Reddy
Instagram: @nr_abhiram

Imports & Exports

Abhiram Reddy — Tue, 30 Jun 2020 16:16:15 +0000

ES6 has brought a lot of revolutionary changes to the way Javascript code is written in general. And the frequently used ones are namely:

variable declarations, ie const and let instead of var
arrow functions
imports and exports In this post, I'll be talking about imports and exports.

So, what are these exactly?
Well, with the arrival of ES6 features, the best thing that happened was that were now able to write modular code. This means that we can structure our code and separate our concerns by writing pieces of code which accomplish a specific task in separate files.
The problem that arises now is, how do we connect these pieces of code to make the application functional? We can import the required parts code to use in that file.

There are two ways to export your code:

default exports
named exports

Default exports

If you have only one function that you would like to reuse in other parts of your code you use default exports as shown below.

Named exports

Named exports are used when you have multiple functions that need to be reused. Here is an example.

Where is it used?

And that's pretty much it. Cool right?
Personally, I love this feature because it helps you when creating larger projects.
For instance, let's say you want to incorporate the MVC(Model, View, Controller) architecture into your code. The MVC model basically seperates the various concerns and the Controller acts as the central piece because it interacts with both the Model and View. So importing the required functions becomes necessary.
I really hope that you find this useful. Do let me know what you think! You can contact me at https://twitter.com/nrabhiram