Defining the application state

Before we start implementing a Redux application, we first have to think about the application state. The state of a Redux application is simply a JavaScript value (usually an object).

The application state includes all data needed to render the application and handle user actions. Later, we will use parts of the application state to render HTML templates and make API requests.

You might not know the full application state in the beginning; that's fine. We will make sure that we design our application state in an extendable way. In a Redux application, the state is usually represented as a JavaScript object. Each property of the object describes a substate of the application.

For example, a simple blog application state could consist of an array of posts (which are written by the user and contain some text):

{ 
  posts: [ 
    { user: 'dan', text: 'Hello World!' }, 
    { user: 'des', text: 'Welcome to the blog' } 
  ] 
} 

Imagine that we want to add a category string to posts later—we can simply add this property to the objects in the posts array:

{ 
  posts: [ 
    { user: 'dan', category: 'hello', text: 'Hello World!' }, 
    { user: 'des', category: 'welcome', text: 'Welcome to the blog' } 
  ] 
} 

Now, let's say we want to implement filtering posts by category; we could extend our state object with a filter property that stores the category as a string:

{ 
  posts: [ 
    { user: 'dan', category: 'hello', text: 'Hello World!' }, 
    { user: 'des', category: 'welcome', text: 'Welcome to the blog' } 
  ],
  filter: 'hello' 
} 

We can reconstruct the whole application state from this object. Being able to do this is one of the things that makes Redux so awesome.

In a later chapter, we will observe how to add the logic that actually filters posts by making use of the application state.

You might think that the application state will become a very complicated object at some point, and that's true—but in a more advanced project; the state won't be defined in a single file. Application state can be split up and dealt with in multiple files (a separate file for each substate), then combined together.

To keep things simple, let's define our application state as an array of posts for now:

[ 
  { user: 'dan', category: 'hello', text: 'Hello World!' }, 
  { user: 'des', category: 'welcome', text: 'Welcome to the blog' } 
]