SignalStore: create the store

v.18

v.18

Fabio Biondi
Google Developer Expert
Microsoft MVP
# Create the Store
A store is a collection of many small states.
Defining a store using NGRX Signals is really simple.
The signalStore
function accepts several states via the withState
functions, in which you can define a new state for the application.
Here we are defining a state that contains an object with a value
property, initialized to 123
:
Use functions and services
We can also define the store as a function:
And it's very useful when you want to get data from a service:
# Provide the Store
With the previous syntax we have only created the store structure but it is not yet usable by the application.
It is necessary to indicate where we want to make it available.
In fact, the state can be defined at the root level (then globally available), at route level, or in a component, making it available to all its children, using the dependency injection mechanism provided by Angular and defining a new provider
:
There is also an alternative cool way to create a store that is globally available directly when we define it using providedIn: "root"
# Read the Store
Now it's time to read the values from the store.
First we have to inject the store we have just created (in components, directives, pipes or in a service):
Now we can read the state in the form of signal:
# DeepSignal
and Nested Objects