NgRx store is basically helps to improve the performance of the application. It acts as a local storage for the data due to which server side rendering is not required every time when fetching the similar data between different tabs or components. Consider NgRx store as a local database in which when the application starts it fills up the database now each time when application needs that data it will first check the store if the data is present before making the API call to fetch data. In this way if data is already present in the store, it will prevent from making the API call and the performance of the application will improve drastically.

To install NgRx store in your application use the following command:

ngrx i @ngrx/store

The above flow chart describes the working of store in details.

To implement store in our application we basically use Actions and Reducers.

Actions: It basically defines all the unique events we are going to use in our applications.

It basically consists of two things:

1. type in the form of string.
2. optional payload of data.

Reducers: A reducer is what takes the incoming actions and decides what to do with it. It takes the previous state and returns a new state based on the given action.

Now let’s understand the working of the store.

The concept of NgRx store is based on the observables. We use observables as we can define property as an observable because that’s what returned from NgRx store when we try to access the data.

The component dispatch an event to the action, it will decide the appropriate action for that request and send that action to the reducer. Reducer is where we have certain logic written that will perform based on the action received. It will take the previous state and action and will return the new state to the component which will then renders the data received from the store. Since it is implemented as observable, so whenever there is change in data, the components that are subscribe to that store will be informed and the component will take appropriate action.

Please find below the simple working example of NgRx store:

Nikhil3180/angular-ngrx-store

These are some of the few topics that are backbone of a programming language and without knowing it sometimes it is difficult to understand how the program behaves. So, let’s study in details and hopefully it will clear out all your doubts.

In Javascript, we have two types i.e. Primitive type and Object type.

The primitive types in Javascript are string, numbers, boolean, undefined, null. These primitive types are value types i.e. these are copied by value.

If we assigned a value of a variable to another variable, the value is copied to the another value.

Therefore, changing the value of one variable doesn’t effect the value of another variable.

Let’s understand it with the help of an example

Javascript

var a = 10;
var b = a;
a = 20;
Console.log(a);
Console.log(b)

The output of above code would be 20 and 10 respectively.

Let’s understand why we get such output. This is because when we assign the value of a to b at that time the value of a is 10 which gets copied to b resulting the value of b to be 10 and after that we changed the value of a to 20 which results the value of a to be 20.

So, this is the concept of value type and it’s basically valid over primitive types in Javascript.

Note: The value type are stored in stack memory.

Now, let’s understand the concept of reference type. It’s bit tricky to understand but once you understand, you will find it’s not that difficult to understand it. So, let’s begin.

Before proceeding further, let’s find out the output of following code.

Javascript

var s = { name : "Nikhil",
			Age : 25}
var d = s;
s.name = "Suraj";
Console.log(s);
Console.log(d);

The output will be {name: “Suraj”, Age: 25} and {name: “Suraj”, Age: 25}.

Now, you will wonder we have only change name for the s only. So why it also changes the value of name in d. So, this is the concept of reference type. Don’t get confuse, let’s find out why it happens.

The objects in Javascript are reference type and these are stored in heap memory.

So, in reference type, a new pointer is created while we assign the value of object to another variable which gets stored in stack and that pointers points to the same location in the heap memory. So whenever we change the value of any object it gets changed within the heap memory and all the pointers pointing to that object now gets the updated value. So, in this the actual value of the object is not copied instead it remains at the same location in the heap memory but we get the new pointer stored in stack pointing to that same location in the heap.

So, this is why when we change the name property in s , it actually gets updated in the heap memory and the d pointing to that location also receives the updated value. So, this is actually how a reference type behaves within the Javascript.

Hence, value type variables and reference type variables behaves totally different and we have to take care of it while writing any program.

In this growing world, everyday a new concept or new algorithm is introduced in Computer Science and that’s the beauty of this which makes this field interesting and exploring.

Each one of us have heard different types of programming like OOPs (Object Oriented Programming), Procedural Programming and Scripting Programming. There are many programming languages which supports these types of programming like C,C++,Java,C#,Ruby,Python,JS etc.

Today, I am going to discuss about a new type of programming i.e. Functional Programming.

This type of programming is now a days a very common practice. The basic idea behind this type of programming is mathematics. Although we all know the basic behind computer science is mathematics.

This type of programming takes the mathematics to a new level.

Just like mathematical functions, we just look at input and produce the output, there is no change in value i.e. no side effects. This is the general idea behind this type of programming. Let’s explore more about it.

First let’s try to understand with the help of mathematical example what it tries to implies.

Suppose I have a set of some characters,

let’s suppose it x.

x = [‘a’,’b’,’c’]

Now I have another function y that uses the values of x.

y = a(x).

Now, after executing the y. does the value of x changes??

The answer would be No. because the y is using the values of x not manipulating the x.

So, this is the idea of functional programming, we are providing some inputs and gets output using the inputs but not changing the inputs.

Now, the question arises how we can implement such concept in our programming language.

Don’t worry it’s quite simple to do so. Now, let’s talk about it in detail.

Each one of us knows about data structures, these are the building block of a programming language as well as an application. So, first approach to the implementation of functional programming is making the data structure immutable. Now, these can’t be changed. Now, if anybody wants to change any value, he/she has to make a copy of this data structure and use them. In this way the input remains same even after performing different operations by the users.

Now, we wonder if we have to copy the whole data structures each time, this leads to the problem of memory wastage. So, to solve this type of problem we have something called persistent data structures.

Persistent data structures are immutable which are implemented like a tree structure to store values, so you don’t have to copy whole array each time, just copy that node of data which you required to manipulate. Generally, people use the concept of 32 wide nodes. In this each node has 32 another nodes which can store millions of data.

So, now list out some advantages of this type of programming.

1. Easy to think: Since the input remains same and you don’t have to worry about what’s the input is. It’s quite easy to think how to solve various programming problem.

2. Easy to understand: Now, the function we are implementing has no side effects, so it can be easily understood by anyone.

Each type of programming has advantages as well as disadvantages same goes with functional programming as well.

Now, let’s explore some of the problems and how we can solve them.

Our customers really don’t care about how we implemented a solution to fix a problem they care about the side effects the functions are producing like updating the value in database, creating a file etc.

As we know functional programming doesn’t have any side effects, so it’s lead to a problem for our customer.

Don’t worry we also have a solution for this problem as well. To solve this problem we are going to use bridge pattern i.e. we need a bridge between functional programming and object oriented programming.

We can achieve this with the help of closure state. It has something called atoms which has a container for mutable state.Through the function at atom, we evaluates the value of the function and it becomes the value of the atom and this is the bridge between the two.

Suppose, if two functions hits the atom to update the value at the same time, both functions will have the same initial value, but one function might be faster than other which will change the value of atom, now when second function tries to change the value of atom, it detects the change in value and again return the function but this time with the new value and this is how the collision is handled same as done in the database transaction.

So, In functional programming we don’t have any side effects except the updating the atom and we are controlling the value of atom as it is the bridge between our lovely functional programming world and outside messy world that has side effects. In this type of programming instead of changing the value of data directly ww throw a function to do so. We have a queue to maintain the record of side effects we are going to do like deleting a file record, write a file etc.

Surely, this type of programming is going to become very popular in the future time as it is easy to understand and with no side effects it will completely change the way of thinking and implementing the ideas to solve the real world problem