Redux introduction with NgRx (part 1): Store & Application State

Redux introduction with NgRx

Because this subject is kinda long and touch different things, I’m making a serie of articles to ease the reading pain and be able to reach directly specific parts of the introduction if you want to.

Here is the summary:

1. Store & Application State (you’re here)
2. Redux Principles
3. Redux core concepts
4. NgRx high level introduction
5. NgRx syntax explained

Redux is a predictable state container for JavaScript apps. — Redux official documentation

This only one sentence contains a lot of information here. We have the words “state container”, “predicable state” and the name of the pattern “Redux”. What is a state? What means predicable and how? What is “Redux”?

We will see what are the meaning of all of these words in the next lines, but first, let’s tackle the State meaning or more precisely the Application State to have a common ground, then we will go deeper into the Redux concept.

What is the Application State?

The Application State is something that every application (small or very large) has, whereas it is on the frontend nor backend side. If we are on a server, we have the state of your application mostly in a database like MySQL, MongoDB etc…

This is different on the client though, even if we can implement the same concept of database using IndexDB or WebSQL. We have many types of states and data that live in the application itself.

Let see what can be considered as a state (non-exhaustive list):

• Server response data: At a certain time, your will do some POST or GET requests into your application to retrieve data. This data will be then present in a “Store”;
• Authentication state: A jwt token for example;
• User information: A name or email address, roles for a user;
• User input: Which represent basically the forms;
• UI state: A dropdown or a modal opened/closed, a loading state of a component;
• Router / location state: One of the most important thing in your application as they are considered as the source of truth, when thinking about state management. Contains all the necessary information to retrieve the state of your application if you hit the refresh button, or share the URL.

State is a representation of the application at a certain point in time.

When speaking about State and Store, sometimes these words get mixed, so, “What is the difference between Store and State?”

Store is a container, gathering multiple and different types of application States at the same place.

The Store allows us to retrieve the application state, we can instruct the store to perform CRUD operations against the state.

Implementing state management

Now that we understand more what is an Application State and the fact that the Store will help us organizing it, we can look at how to implement that state management. This implementation is usually done via libraries, but what these libraries help you doing are mostly:

Model our app state

It is up to you to model it, like you do on the server with the tables of your database. On the client side, we’re looking for fast and optimized way of sharing and composing as most as possible states inside the application.

Update state

When something changes, you want to make sure you’ve captured the change in your application state (GET data from server).

Read state values

We want to read the initial state and if the state as changed, we want to keep reading the changes in our components.

Monitor/observe changes to state

We want to be able to react to certain changes by triggering new changes.

See you in the next part “Redux Principles”!