Example of the Store
Let's explore what a Store is with the help of an example.
We'll cover the following
What is a Store?
So far, we’ve mentioned State and Store, but sometimes it’s difficult to know what the difference between the two is. Let’s try to clear up the distinction between the two.
A Store is an Object from NgRx that contains the State of the application. This Store object has an API that allows us to manage the State contained within the Store.
The State is the data we create for our application, which is specific to the application we’re building. So, from our apple example earlier, applesCount
is the state information, which we keep in a Store object.
To create this State, we first create an interface of the State, defining the properties of the State model. There is an example of this in the ApplesState
interface that we defined earlier. This interface says that the ApplesState
has a property of applesCount
, so when we create the initial state object, we have to add it (TypeScript will throw an error if we don’t).
Finally, we tell the Reducer to return a state object of Type ApplesState
. As you can see, the State is created within the associated Reducer (See line 40 of apples-reducer.ts
).
Get hands-on with 1200+ tech skills courses.