Difference between Component State and Redux Store

iFour Team -June 18, 2021

Listening is fun too.

Straighten your back and cherish with coffee - PLAY !

Difference between Component State and Redux Store

We can handle state in many Angular projects in a fairly simple manner: we typically grab data from services and render it in components, passing values down the component tree as we go.

The Single Page Web Applications concept is great for building up to modern web-based applications. However, as more and more applications are transferred to the browser, the complexity and amount of data that must be handled continues to increase.

Many modern web frameworks, such as Angular, divide the application into smaller units using a component-based approach. This approach is great because the use of components helps to better structure your project, keep an overview and make the code reusable.

Component State

When we use Angular 4, we are implementing a component that also manages its state (data). For example, if a component needs to view data from a service, the appropriate service methods are called, and the returned data is saved in the component class's properties. You can then access and insert those properties in the component template, leading to the property values being shown in the HTML output.

For smaller apps, managing our apps in this manner is great, but as our apps expand, making multiple components handle various parts of the state becomes inefficient. Passing all of our values down our component tree, for example, has the following drawbacks:

Passing intermediate properties – We must pass values down through inputs to get the state to any component. This means that several intermediate components are passing state that they aren't concerned with or using.

Redux

If you're unfamiliar with Redux, you can learn more about it on the official website. Online application data architecture is changing, and conventional data structuring methods are no longer sufficient for broad web applications. Because it is both strong and simple to understand, Redux has become extremely popular.

Since data architecture is a complicated topic, Redux's best feature is probably its simplicity. Redux is less than 100 lines of code when stripped down to its essential core. We can use Redux as the backbone of our application to build rich, easy-to-understand web apps. But first, let's go over how to write a simple Redux app, and then we'll see what patterns emerge when we implement these ideas in a larger app.

There have been many attempts to use Redux or construct a Redux-inspired Angular framework. The following are two notable examples:

1.ngrx/store and
2.Angular2-redux

ngrx is a highly observable-based Redux-inspired architecture. Angular2-redux adds several Angular helpers and uses Redux as a dependency (dependency-injection, observable wrappers).

Redux: Key Ideas

Redux's key ideas are as follows:

1.All the data of our application is in a single data structure called the state that is stored in the store.
2.Our app reads the state of the store.
3.This store is never directly mutated.
4.Actions are fired as a result of user interaction (and other code).
5.A new state is created by using a function called the reducer to combine the old state and the action.

Planning to Hire Angular Software Development Company? Your Search ends here.

Connect us now

Figure: Redux building blocks structure

Redux keeps track of your app's state in the store, which is a single data structure in your app. The state of your application is read from the store by the components of your app. The store is never directly mutated. Instead, a reducer function is used to dispatch an action. The reducer function combines the old state with the mutations defined by the action to create a new application state.

Let's take a look at each of Redux's building blocks one by one:

Store

The store is made up of only one JS object. To make a store, simply add a TypeScript file to our project and declare a new interface type with all of the properties we want to keep in the store.

Actions

Actions are simple JS objects that represent what has happened. It's possible to compare it to a series of events.

Reducers

A reducer is a function that describes how a state changes as a result of an action. The fact that a reducer function does not change the state is crucial to consider. It always returns a new state object that includes the changes.

Conclusion

In this blog, we have discussed Component State vs Redux store in which we have described the component state with its drawbacks. Then we have learned Redux in which we have portrayed its key ideas with its building blocks which are Store, Actions, and Reducers.