What is a state in Redux?

Question

I have googled, read and watched tutorials and for some reason, everyone expects you to know what a state is. Some slightly brush over it but don't really explain what it is. In the end, the whole explanation of what a state is becomes verbose with nothing really to pin point to and since Redux isn't bound to React and can be used in Angular too, I'd be very happy if someone explains to me and everyone else who is also wondering what a state is (preferably in Angular with an example).

Answer 1

What is a state in Redux?

State is a design pattern used to represent the state of an object. One of the Gang of Four's behavioral design patterns. It's not specific to Redux, which is just a centralized place to store data.

---

The Redux State is the God of your application. If you are an element and you want to know whether you are clicked (for example) now, you could ask State. It is a photograph of your application at a given time.

It stores all the information of your application. Imagine taking a picture of your application, it would have a clicked checkbox, a dropdown list enabled, a radio box disabled, etc. for example.

The state is an object that has all these information as properties. For example, { checkboxClicked: true}. In general, the object has a snapshot of your application at its current state.

When the user acts, by unchecking the checkbox, the state of your application should change. So let's do this:

{checkboxClicked: false}   // WRONG

State is immutable. This means that you cannot modify it (you can't modify a photograph, it belongs to the past).

So what do we do? We register reducers that handle the action caused by the user.

In this case, the reducer will take the action of unchecking the checkbox, and produce a new, fresh state, which will be exactly as the previous one, except from the property named checkboxClicked, which will be set to true now.

---

Alternative explanation:

State is the center of your world (application).

Imagine that your application has a checkbox. The information of whether this element is clicked or not can be modelled in the state object. Imagine it like this (rough intuition):

State = {checkboxClicked: false};

The above could be the initial state of your application.

When the user checks that checkbox, Angular dispatches an action. The information has to be updated in your state, but not at this particular one, since this state is gone, it belongs to the past!

Your application now has a checkbox clicked. You have to take a new photograph to depict the new information. State is immutable, you cannot modify it. In other words, you are not allowed to do this State.checkboxClicked = true;.

You produce a new, fresh State via a Reducer. A Reducer is a function that handles an action. In that case it will create a State object, where every property will be the same as before, and only checkboxClicked will be set to `true.

This will be the current State of your application, until a user acts.