<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Niclas Gleesborg</title>
    <description>The latest articles on DEV Community by Niclas Gleesborg (@niclassg).</description>
    <link>https://dev.to/niclassg</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1005326%2F1ab2cd48-3622-4a53-a6b3-0003dd2f0a3b.png</url>
      <title>DEV Community: Niclas Gleesborg</title>
      <link>https://dev.to/niclassg</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/niclassg"/>
    <language>en</language>
    <item>
      <title>Navigating CDI Scope in Quarkus: A Concurrency perspective</title>
      <dc:creator>Niclas Gleesborg</dc:creator>
      <pubDate>Mon, 02 Jun 2025 06:46:34 +0000</pubDate>
      <link>https://dev.to/niclassg/navigating-cdi-scope-in-quarkus-a-concurrency-perspective-3bgg</link>
      <guid>https://dev.to/niclassg/navigating-cdi-scope-in-quarkus-a-concurrency-perspective-3bgg</guid>
      <description>&lt;p&gt;&lt;strong&gt;TL;DR&lt;/strong&gt;&lt;br&gt;
In Quarkus (a tool for building backend services), there are two ways of managing how objects (called beans) are created and used:&lt;/p&gt;

&lt;p&gt;Application Scoped (@ApplicationScoped):&lt;br&gt;
Only one object is created and shared by everyone who uses the service.&lt;br&gt;
Good because it saves memory and is fast.&lt;br&gt;
But you must be careful since many people might use it at the same time, which can cause problems.&lt;br&gt;
Request Scoped (@RequestScoped):&lt;br&gt;
A new object is made for each person or request.&lt;br&gt;
Good because it's safe and easy—each user gets their own separate object.&lt;br&gt;
But it uses more memory since many objects are made and then thrown away quickly.&lt;br&gt;
Choosing which one to use depends on balancing how fast your service needs to run versus keeping things safe and simple.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Introduction&lt;/strong&gt;&lt;br&gt;
Managing the lifecycle and concurrency of service objects is essential in developing performant, robust microservices. Quarkus, a modern Java framework designed for container-native and cloud-native applications, relies heavily on Contexts and Dependency Injection (CDI) to control object lifecycles through annotations known as scopes. Among these, the @ApplicationScoped and @RequestScoped annotations are commonly employed to manage the lifecycle of service objects, directly influencing performance characteristics, memory usage, and concurrency behavior.&lt;/p&gt;

&lt;p&gt;The @ApplicationScoped annotation instructs the CDI container to create a single instance of a bean that is shared throughout the application's entire lifecycle. This reuse offers substantial advantages in terms of reduced memory footprint and minimal object instantiation overhead, thereby enhancing runtime efficiency. However, its shared nature inherently introduces concurrency risks, as the single instance is accessible by multiple threads simultaneously. Consequently, improper handling or misunderstanding of thread-safety principles within these beans can lead to race conditions, inconsistent states, or application-wide errors.&lt;/p&gt;

&lt;p&gt;In contrast, @RequestScoped beans provide a fresh instance for every individual HTTP request, naturally isolating each request's state. This isolation mitigates thread-safety concerns significantly, simplifying the development model and reducing concurrency-related risks. However, such per-request instantiation comes at the cost of increased object creation and destruction overhead, potentially affecting performance and memory consumption under high load scenarios.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;@ApplicationScoped&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Definition&lt;/strong&gt;&lt;br&gt;
@ApplicationScoped is a normal scope in Quarkus, meaning the CDI container creates a single shared instance of the bean for the entire application. This one instance is reused for all injection points and throughout the app’s lifetime. By default, Quarkus instantiates an @ApplicationScoped bean lazily – a client proxy is injected, and the actual bean instance is created only when you first invoke a method on that proxy​&lt;/p&gt;

&lt;p&gt;In other words, merely injecting an @ApplicationScoped bean doesn’t construct it; the first  method call triggers its creation. Once created, all injections refer to the same instance, so any state within an @ApplicationScoped bean is global (application-wide) state​&lt;/p&gt;

&lt;p&gt;This scope remains active for the entire runtime of the application, making the bean effectively a singleton (in terms of one instance) managed by CDI.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Concurrency&lt;/strong&gt;&lt;br&gt;
Because there is only one instance of an @ApplicationScoped bean shared across the whole application, concurrency is an important concern. The CDI container does not automatically synchronize access to @ApplicationScoped beans. If multiple threads call methods on the bean at the same time (for example, multiple HTTP requests or background jobs using the same service), those calls happen concurrently on the single instance. By default, nothing in Quarkus makes an @ApplicationScoped bean thread-safe – it’s up to your bean’s implementation to handle concurrent access. If the bean is stateless (no mutable shared fields), it is naturally thread-safe. However, if it maintains any state or mutable data (caches, counters, accumulators, etc.), you must ensure thread-safety. Techniques for ensuring thread-safety is beyond the scope of this article. Treat @ApplicationScoped beans as global singletons that need explicit thread-safety measures when accessed by multiple threads. If a bean’s purpose is purely to provide stateless services (e.g. computations, database access using local variables), you don’t need additional locking. If it does maintain state (in-memory caches, etc.), use thread-safe structures or synchronization. If an @ApplicationScoped bean injects a @RequestScoped bean the @ApplicationScoped bean will be instanced for the specific request using a client proxy thus making it safe to use for the request.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Performance&lt;/strong&gt;&lt;br&gt;
The @ApplicationScoped scope can be very performance-friendly due to its reuse of a single instance. Memory footprint is minimal for the bean itself (only one instance lives in memory, aside from a small proxy). Creation cost is paid only once, when the bean is first needed, rather than per injection or per call. Lazy instantiation means your application startup isn’t burdened by constructing every single @ApplicationScoped bean up front – they initialize on demand. This can improve startup time if some application-scoped beans are never actually used. However, the first invocation on an @ApplicationScoped bean will incur the cost of creation and any initialization (@PostConstruct logic) – so the very first request or usage might be slightly slower for that bean​. After that, all calls are to an already-instantiated object. Just be mindful that if an @ApplicationScoped bean is injected but never used (no method called), it will never be instantiated under Quarkus’s lazy approach – which is efficient (zero cost) but means any initialization code in it won’t run unless triggered. If you require an application bean to initialize at startup (e.g. to pre-load caches), you can force instantiation using mechanisms like the Quarkus &lt;a class="mentioned-user" href="https://dev.to/startup"&gt;@startup&lt;/a&gt; annotation or an observer for the startup event, which will call a method and thus initialize the bean eagerly​.&lt;/p&gt;

&lt;p&gt;Overall, use @ApplicationScoped when you want one instance for the entire app and either no state or shared state. It’s the most common scope for core services that aren’t tied to a specific user or request.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;@RequestScoped&lt;/strong&gt;&lt;br&gt;
&lt;strong&gt;Definition&lt;/strong&gt;&lt;br&gt;
@RequestScoped is a CDI normal scope in Quarkus that ties a bean’s lifespan to an HTTP request. When a request comes into your application (e.g. a REST call), the CDI container will provide a fresh instance of each @RequestScoped bean needed for that request. The bean is created lazily – similarly to application scope – when a method on the bean is first invoked during the request​.&lt;/p&gt;

&lt;p&gt;It then remains available throughout that single request processing pipeline (potentially across multiple components that all inject the bean). Once the request is complete (response sent), the request context is destroyed and the bean instance is disposed. In short, each HTTP request gets its own instance of the bean, and it exists only for the duration of that request​&lt;/p&gt;

&lt;p&gt;This scope is automatically active in Quarkus whenever you have the RESTEasy (JAX-RS) or Servlet environment in use. The request context typically covers servlets, filters, JAX-RS resource methods, and any beans used within them.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Concurrency&lt;/strong&gt;&lt;br&gt;
Under normal conditions, a single HTTP request is handled by one thread at a time, so a @RequestScoped bean instance will not be accessed concurrently by multiple threads (during that request). Each thread/request has its own separate instance, so thread safety is usually not a concern for the bean’s internal state – there’s no shared state across requests by definition. This means you can freely use non-thread-safe structures inside a request bean as long as you don’t leak it out of that request. The isolation provided by the scope prevents concurrency issues between different requests (one request cannot directly access another’s bean instance).&lt;/p&gt;

&lt;p&gt;However, there are some caveats. If your application uses asynchronous request handling or reactive processing, you must ensure the request context remains active on threads that continue processing the request. In Quarkus, if you switch threads during a request (for example, using a reactive stream), the request scope might not automatically propagate. Misusing a request-scoped bean outside of its context can lead to unpredictable behavior. Never share a @RequestScoped instance between threads or requests – it should only ever be used within the single request it was created for. Also, if you manually spawn threads inside a request and try to use the request bean there, those threads won’t have the request context unless explicitly carried over. This is a pitfall to avoid (the simpler rule: keep request-scoped usage on the request thread).&lt;/p&gt;

&lt;p&gt;Because each request gets a new instance, any state in a @RequestScoped bean is inherently not visible to other requests (no data races across requests). There’s typically no need for synchronization inside such beans unless you perform some concurrent operation within the request itself. &lt;/p&gt;

&lt;p&gt;In summary, @RequestScoped beans can be treated as thread-confined to the request. Just be careful not to pass references to them to other threads or cache them beyond the request.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Performance&lt;/strong&gt;&lt;br&gt;
The overhead of using @RequestScoped beans is generally low and proportional to your request load. For each request, new instances are created as needed and then garbage-collected (or destroyed) afterward. This means there is a bit of churn: if your application handles thousands of requests per second and each request needs a particular request-scoped bean, you will be creating and destroying many instances rapidly. Fortunately, object creation in Java is usually cheap, and Quarkus’s CDI container is optimized for this lifecycle. The container also reuses the context for each request in a streamlined way. One performance benefit of request scope is that it naturally limits scope of data – reducing memory bloat. Also, because Quarkus uses lazy instantiation for normal scopes, a request bean is only allocated if actually used in a given request path. If a particular request doesn’t touch a certain bean, it won’t be created. This avoids unnecessary work. &lt;/p&gt;

&lt;p&gt;In summary, @RequestScoped beans have a small per-request cost (construction, injection, destruction) and no cross-request memory usage, which typically leads to a good balance for handling user-specific or request-specific logic. The impact is linear with request volume. As best practice, keep the state in request beans lean (only what’s needed for that request) to minimize overhead.&lt;/p&gt;

</description>
      <category>quarkus</category>
      <category>backend</category>
      <category>concurrency</category>
    </item>
    <item>
      <title>Getting started with ngrx</title>
      <dc:creator>Niclas Gleesborg</dc:creator>
      <pubDate>Fri, 13 Jan 2023 09:55:54 +0000</pubDate>
      <link>https://dev.to/niclassg/getting-started-with-ngrx-4fh</link>
      <guid>https://dev.to/niclassg/getting-started-with-ngrx-4fh</guid>
      <description>&lt;h1&gt;
  
  
  Getting Started With NGRX in Angular
&lt;/h1&gt;

&lt;p&gt;Getting started with ngrx in angular can be a fairly straightforward process. It is important to understand the basics of the library before diving in too deep. This article will cover some of the basics of ngrx, including what is and why it is useful, discussing some of the data flow concepts involved, and also providing an example of how to get started with it.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is NGRX?
&lt;/h2&gt;

&lt;p&gt;NGRX is a library that helps manage state in angular applications. It is based on the concept of a redux store, which is a centralized data store where all of an application's state is stored in one location, rather than scattered throughout the application and possibly stored in different services or components. NGRX helps to make sure that state is maintained across multiple components and services, which helps to keep the application more manageable.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Use NGRX?
&lt;/h2&gt;

&lt;p&gt;NGRX helps applications remain scalable and maintainable by keeping state centralized and allowing components to communicate with each other without directly altering each other's state. This communication is achieved through ngrx's "action-reducer" pattern, which allows components to emit "actions" and have a "reducer" to handle the action and update the state accordingly.&lt;/p&gt;

&lt;p&gt;This pattern helps to ensure that components are not directly manipulating each other's state, which allows for better debugging and maintainability. It also allows for better separation of concerns and a single source of truth when working with data.&lt;/p&gt;

&lt;h2&gt;
  
  
  Data Flow Concepts
&lt;/h2&gt;

&lt;p&gt;The action-reducer pattern is the cornerstone of ngrx. It is based on the idea that each component or service can emit an action, which is captured by a reducer. This reducer can then be responsible for updating the state of the application. This data flow works by allowing components to emit actions, which are then captured by the reducer and used to update the state of the application.&lt;/p&gt;

&lt;h2&gt;
  
  
  Getting Started with NGRX
&lt;/h2&gt;

&lt;p&gt;Before diving in to using ngrx, it is important to make sure that you understand the basics of redux, which ngrx is based on. &lt;/p&gt;

&lt;p&gt;Once a basic understanding of redux has been achieved, the next step is getting ngrx set up in your angular application. This can be done using the ngrx/store package. This package provides many of the necessary functions to manage an application&lt;/p&gt;

&lt;h1&gt;
  
  
  Redux
&lt;/h1&gt;

&lt;p&gt;Redux is a library used in JavaScript apps that helps make managing data simple and consistent. It does this by providing an efficient way to store and access data, as well as dispatch actions to change data. &lt;/p&gt;

&lt;h2&gt;
  
  
  Key Concepts
&lt;/h2&gt;

&lt;p&gt;The core concepts of Redux are actions, reducers, and store.&lt;/p&gt;

&lt;h3&gt;
  
  
  Actions
&lt;/h3&gt;

&lt;p&gt;Actions are plain objects that are used to send data from your app to your store. They typically include a &lt;code&gt;type&lt;/code&gt; field, which is a string that describes the action being performed. Actions are dispatched by a function called an action creator.&lt;/p&gt;

&lt;h3&gt;
  
  
  Reducers
&lt;/h3&gt;

&lt;p&gt;Reducers are responsible for taking in an action and the current state of the store, and returning a new state. Reducers must be pure functions, meaning that they should always return the same output for a given set of inputs.&lt;/p&gt;

&lt;h3&gt;
  
  
  Store
&lt;/h3&gt;

&lt;p&gt;The store houses all the data pertaining to your application, and is the only source of truth. The store is composed of the root reducer, state, and any middleware. Middleware give you an opportunity to intercept dispatched actions and do something with them before they reach the reducers. &lt;/p&gt;

&lt;h2&gt;
  
  
  Benefits of Using Redux
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Predicable State Management:&lt;/strong&gt; Redux ensures that the state of your application is predictable, allowing for easier and faster debugging. &lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Efficient Data Access:&lt;/strong&gt; Redux allows for easier and faster access to data, since everything is managed in the same place.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Separation of Concerns:&lt;/strong&gt; Redux allows for separation of concerns between UI and data logic, making for more efficient and resilient applications.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cleaner Code:&lt;/strong&gt; Using Redux leads to cleaner code as it removes the need for complicated logic for data management. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Using Redux in your application can help make it more efficient and easier to manage data.&lt;/p&gt;

&lt;h1&gt;
  
  
  Setup ngrx in an angular application
&lt;/h1&gt;

&lt;p&gt;Setting up ngrx in an Angular application can be done by following these steps:&lt;br&gt;
(note that code snippets are only meant for demonstration)&lt;/p&gt;

&lt;p&gt;Install the ngrx packages by running&lt;br&gt;
&lt;br&gt;
 &lt;code&gt;npm install @ngrx/store @ngrx/effects @ngrx/entity&lt;/code&gt;&lt;br&gt;
&lt;br&gt;
 in the command line.&lt;/p&gt;

&lt;p&gt;In the &lt;code&gt;app.module.ts&lt;/code&gt; file, import the &lt;code&gt;StoreModule&lt;/code&gt; and &lt;code&gt;EffectsModule&lt;/code&gt; and add them to the &lt;code&gt;imports&lt;/code&gt; array. Also, add the &lt;code&gt;reducers&lt;/code&gt; to the &lt;code&gt;StoreModule&lt;/code&gt;'s &lt;code&gt;forRoot&lt;/code&gt; method.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;StoreModule&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@ngrx/store&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;EffectsModule&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@ngrx/effects&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;reducers&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./store/reducers&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;NgModule&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;imports&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="nx"&gt;StoreModule&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;forRoot&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;reducers&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
    &lt;span class="nx"&gt;EffectsModule&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;forRoot&lt;/span&gt;&lt;span class="p"&gt;([])&lt;/span&gt;
  &lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="p"&gt;...&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create a new folder called &lt;code&gt;store&lt;/code&gt; in the &lt;code&gt;src&lt;/code&gt; folder. Inside the &lt;code&gt;store&lt;/code&gt; folder, create a new file called &lt;code&gt;app.state.ts&lt;/code&gt; and define the initial state of the application.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;AppState&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// define the properties of your state here&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Create new files inside the &lt;code&gt;store&lt;/code&gt; folder for actions, effects, and reducers, and define the actions, effects and reducers accordingly.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// actions.ts&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createAction&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;props&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@ngrx/store&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;loadData&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;createAction&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;[App] Load Data&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;props&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;any&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// effects.ts&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Injectable&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@angular/core&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Actions&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;createEffect&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;ofType&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@ngrx/effects&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;loadData&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./actions&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;mergeMap&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;rxjs/operators&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Injectable&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;AppEffects&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;loadData$&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;createEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;actions$&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
      &lt;span class="nx"&gt;ofType&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;loadData&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
      &lt;span class="nx"&gt;mergeMap&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;action&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; 
        &lt;span class="c1"&gt;// make an HTTP call to load data&lt;/span&gt;
        &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;http&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="kd"&gt;get&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;/api/data&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
          &lt;span class="nx"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;type&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;[App] Data Loaded&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;payload&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="p"&gt;}))&lt;/span&gt;
        &lt;span class="p"&gt;)&lt;/span&gt;
      &lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;);&lt;/span&gt;

  &lt;span class="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;actions$&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Actions&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;http&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;HttpClient&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// reducers.ts&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createReducer&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;on&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@ngrx/store&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;loadData&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./actions&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;initialState&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;data&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;appReducer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;createReducer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;initialState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;loadData&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Additionally create a &lt;code&gt;selectors.ts&lt;/code&gt; file for the selectors&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createFeatureSelector&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;createSelector&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@ngrx/store&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;AppState&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./app.state&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;getState&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;createFeatureSelector&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;AppState&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;featureName&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;getItems&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;createSelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="nx"&gt;getState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;getSelectedItem&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;createSelector&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="nx"&gt;getState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;selectedItem&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In your component, import the &lt;code&gt;Store&lt;/code&gt; and &lt;code&gt;select&lt;/code&gt; from &lt;code&gt;@ngrx/store&lt;/code&gt; and use it to subscribe to the state and dispatch actions.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Component&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@angular/core&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Store&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@ngrx/store&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;loadData&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./store/actions&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;getItems&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./store/selectors&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Component&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;selector&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;app-root&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;template&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`
    &amp;lt;div *ngFor="let item of data | async"&amp;gt;
      {{ item }}
    &amp;lt;/div&amp;gt;
    &amp;lt;button (click)="loadData()"&amp;gt;Load Data&amp;lt;/button&amp;gt;
  `&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;AppComponent&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;data&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;pipe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;select&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;getItems&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;

  &lt;span class="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Store&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;

  &lt;span class="nx"&gt;loadData&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dispatch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;loadData&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Finally, add the effects to the &lt;code&gt;providers&lt;/code&gt; array in the &lt;code&gt;app.module.ts&lt;/code&gt; file&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;AppEffects&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./store/effects&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;NgModule&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="p"&gt;...&lt;/span&gt;
  &lt;span class="na"&gt;providers&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;AppEffects&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="p"&gt;...&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;AppModule&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's it! You have successfully set up ngrx in your Angular application. You can now use the store to manage the state of your application, handle actions, and perform side-effects using effects.&lt;/p&gt;

</description>
      <category>angular</category>
      <category>ngrx</category>
    </item>
    <item>
      <title>Getting started with ngrx/store</title>
      <dc:creator>Niclas Gleesborg</dc:creator>
      <pubDate>Tue, 10 Jan 2023 12:57:18 +0000</pubDate>
      <link>https://dev.to/niclassg/getting-started-with-ngrxstore-560g</link>
      <guid>https://dev.to/niclassg/getting-started-with-ngrxstore-560g</guid>
      <description>&lt;h1&gt;
  
  
  Introduction
&lt;/h1&gt;

&lt;p&gt;NGRX Store is a library for managing state in Angular applications. It is built on top of RxJS, which is a library for reactive programming using Observables. NGRX Store provides a way to organize your application's state into a single, immutable data store, and allows you to manage and update the state using a set of powerful tools and concepts.&lt;/p&gt;

&lt;p&gt;NGRX Store uses a centralized store to hold the state of your application, which makes it easy to share the state between different components and services. The state is represented as an Observable, which makes it easy to subscribe to changes and react to them.&lt;/p&gt;

&lt;p&gt;NGRX Store also provides a set of powerful tools for managing the state, such as Actions, Reducers, and Effects. Actions are used to represent events that occur in the application, such as a user clicking a button. Reducers are used to update the state based on the actions that occur. And Effects are used to handle side effects, such as making an HTTP request.&lt;/p&gt;

&lt;p&gt;By using NGRX Store, you can write more predictable, testable, and maintainable code. It also gives you a consistent way to handle state management across your application, which makes it easier to reason about the behavior of your application.&lt;/p&gt;

&lt;p&gt;NGRX also have other packages such as NGRX Effects, NGRX Entity, NGRX Router-Store, etc. which work as extensions to the base NGRX/store and provide more specific functionality.&lt;/p&gt;

&lt;h1&gt;
  
  
  Benefits of using ngrx/store
&lt;/h1&gt;

&lt;p&gt;There are several benefits to using NGRX Store in your Angular applications:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Centralized state management: By using a centralized store to hold the state of your application, it becomes much easier to share the state between different components and services, and to reason about the behavior of your application.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Immutable state: NGRX Store uses a strict set of rules for managing the state, which ensures that the state is always immutable. This makes it easy to track changes to the state and to undo or revert to previous states if necessary.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Predictable behavior: NGRX Store uses a strict set of rules for managing the state, which makes it easy to predict how the state will change in response to different actions. This helps to make your application more testable and maintainable.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Powerful tools: NGRX Store provides a set of powerful tools for managing the state, such as Actions, Reducers, and Effects. These tools make it easy to handle different types of state changes, and to handle side effects such as making an HTTP request.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Reactive programming: NGRX Store is built on top of RxJS, which provides a powerful set of tools for reactive programming. This makes it easy to subscribe to changes in the state and to react to them in a consistent way.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Scalable: NGRX's architecture is scalable for large and complex application with multiple modules and features. It also handle well in application with high data loads, with good performance.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Testable: NGRX's architecture is testable, due to the separation of state and logic, making it easy to test the different part of your application, such as actions, reducers and effects.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Well established: NGRX is one of the well-established and most popular state management library for Angular application, which is backed by a large and supportive community, with plenty of tutorials and resources available.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h1&gt;
  
  
  Installation
&lt;/h1&gt;

&lt;p&gt;Installing NGRX Store in an Angular application is a two-step process:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Install the NGRX packages: You will need to install the @ngrx/store package, as well as any other packages you want to use, such as @ngrx/effects or @ngrx/entity. You can install them using npm or yarn.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install @ngrx/store @ngrx/effects @ngrx/entity
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;yarn add @ngrx/store @ngrx/effects @ngrx/entity
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Import the StoreModule in your app module: After installing the NGRX packages, you will need to import the &lt;code&gt;StoreModule&lt;/code&gt; in your app's root module and configure it to use the &lt;code&gt;reducer&lt;/code&gt; function that you will create.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;StoreModule&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@ngrx/store&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;reducer&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./reducers&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;NgModule&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;imports&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="nx"&gt;StoreModule&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;forRoot&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;state&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;reducer&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;AppModule&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Note that in the above example I'm importing reducer function from a &lt;code&gt;reducers.ts&lt;/code&gt; file. This is where you will define all the logic of your state management using &lt;code&gt;Actions&lt;/code&gt;, &lt;code&gt;Reducers&lt;/code&gt;, &lt;code&gt;Effects&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;You also need to import the store in your component where you want to use it.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Store&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@ngrx/store&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Store&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It is also a good practice to organize the state and actions in a specific way, like creating a folder for each feature and a file for each action, reducer and effect.&lt;/p&gt;

&lt;p&gt;You may also consider adding the ngrx dev tools to your browser to have a better developer experience&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install @ngrx/store-devtools
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;StoreDevtoolsModule&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@ngrx/store-devtools&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;and then import it on your app.module.ts&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="nx"&gt;imports&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="nx"&gt;StoreModule&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;forRoot&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;state&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;reducer&lt;/span&gt; &lt;span class="p"&gt;}),&lt;/span&gt;
    &lt;span class="nx"&gt;StoreDevtoolsModule&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;instrument&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
  &lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;It is also good to read the official documentation and the guidelines to have a deeper understanding of how to structure your state management and have a better organization and performance.&lt;/p&gt;

&lt;h1&gt;
  
  
  Example
&lt;/h1&gt;

&lt;p&gt;Here is a simple example of how you might use NGRX Store in an Angular application. Let's say we have a simple application that allows the user to increment or decrement a counter. Here's how we might set up the store to manage the state of the counter:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Define the state: The first step is to define the state that the store will manage. In this case, we only have a single piece of state: the counter. We will create a file &lt;code&gt;counter.state.ts&lt;/code&gt; to define the state like this:
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kr"&gt;interface&lt;/span&gt; &lt;span class="nx"&gt;CounterState&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;initialState&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;CounterState&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Create the actions: Next, we will create a file &lt;code&gt;counter.actions.ts&lt;/code&gt; to define the actions that the store can handle. In this case, we have two actions: one to increment the counter and one to decrement it.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createAction&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;props&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@ngrx/store&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;increment&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;createAction&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;[Counter] Increment&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;decrement&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;createAction&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;[Counter] Decrement&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Create the Reducers: Now we need to create a file &lt;code&gt;counter.reducer.ts&lt;/code&gt; to handle the actions and update the state.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;createReducer&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;on&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@ngrx/store&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;decrement&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./counter.actions&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;CounterState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;initialState&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./counter.state&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;counterReducer&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;createReducer&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;initialState&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;})),&lt;/span&gt;
  &lt;span class="nx"&gt;on&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;decrement&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;state&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt; &lt;span class="p"&gt;})),&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Import the StoreModule in your app module: After installing the NGRX packages, you will need to import the StoreModule in your app's root module and configure it to use the counterReducer function that you created.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;StoreModule&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@ngrx/store&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;counterReducer&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./counter.reducer&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;NgModule&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;imports&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
    &lt;span class="nx"&gt;StoreModule&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;forRoot&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt; &lt;span class="na"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;counterReducer&lt;/span&gt; &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;AppModule&lt;/span&gt; &lt;span class="p"&gt;{}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ul&gt;
&lt;li&gt;Use the store in your component: Now you can use the store in your component by injecting it and subscribing to the state.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Component&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@angular/core&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;Store&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@ngrx/store&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;decrement&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;./counter.actions&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="p"&gt;@&lt;/span&gt;&lt;span class="nd"&gt;Component&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="na"&gt;selector&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;app-root&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;template&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;`
    &amp;lt;button (click)="decrement()"&amp;gt;-&amp;lt;/button&amp;gt;
    &amp;lt;span&amp;gt;{{ count }}&amp;lt;/span&amp;gt;
    &amp;lt;button (click)="increment()"&amp;gt;+&amp;lt;/button&amp;gt;
  `&lt;/span&gt;
&lt;span class="p"&gt;})&lt;/span&gt;
&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nx"&gt;AppComponent&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nl"&gt;count&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kr"&gt;number&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="kd"&gt;constructor&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;private&lt;/span&gt; &lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;Store&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;select&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;count&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nx"&gt;subscribe&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dispatch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="nx"&gt;decrement&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;store&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dispatch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;decrement&lt;/span&gt;&lt;span class="p"&gt;());&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h1&gt;
  
  
  Scenarios where ngrx/store can be useful
&lt;/h1&gt;

&lt;p&gt;NGRX Store is particularly useful in Angular applications that have a complex state or that need to handle a large amount of data. Here are a few scenarios in which NGRX Store can be useful:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Large or complex state: NGRX Store provides a way to organize your application's state into a single, immutable data store, which makes it easy to share the state between different components and services. This can be particularly useful in applications with large or complex state that is difficult to manage using a traditional approach.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Data-heavy applications: NGRX Store provides a way to manage large amounts of data in an efficient and performant way, which can be particularly useful in applications that need to handle a lot of data, such as large lists or tables of data.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Real-time applications: NGRX Store's use of RxJS makes it easy to handle real-time data and updates, which can be particularly useful in applications that need to handle data in real-time, such as chat or monitoring applications.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Applications that need undo/redo functionality: NGRX Store's immutability of state makes it easy to revert the state of the application to previous state, which can be useful in applications where undo/redo functionality is needed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Multi-module application : NGRX Store's ability to manage state at a global level in a centralized way and it’s powerful tools are also ideal for large-scale, multi-module applications where different sections of an application could have different ownership, but they still need to share the same data and state.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Applications that need to handle complex state transitions: In some scenarios, an application might need to handle complex state transitions that depend on the current state, or that depend on the order in which actions are performed. NGRX's architecture allows you to handle these transitions in a clean and organized way.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Overall, NGRX store is useful in applications that need a powerful and predictable way to manage state, and that benefit from its separation of concerns, immutability and powerful tools.&lt;/p&gt;

&lt;h1&gt;
  
  
  Downsides
&lt;/h1&gt;

&lt;p&gt;NGRX Store is a powerful tool for managing state in Angular applications, but it also has some downsides:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Learning curve: NGRX Store uses a set of concepts and tools that may be unfamiliar to some developers, such as Actions, Reducers, and Effects. It also makes use of RxJS, which may be unfamiliar to developers who haven't worked with reactive programming before. This learning curve can be steep, and it may take some time for developers to fully understand how to use NGRX Store effectively.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Boilerplate: In order to set up NGRX Store, you will need to write a fair amount of boilerplate code, such as actions, reducers, and effects. This can add extra development time and make your codebase more complex.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Performance: While NGRX Store can be performant, it does have some overhead, particularly when working with large amounts of data. It may also have performance issues with high-frequency updates. This can be mitigated by proper configuration and implementation of the NGRX store&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Over-engineering: NGRX Store is a powerful tool, but it may not be necessary in all cases. It's important to consider whether it's the right tool for the job before incorporating it into your application, as the added complexity and boilerplate may be unnecessary if the state is not complex or you don't need the features provided by NGRX.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Steep developer requirement: As the technology is complex, the development team must have a good knowledge of RxJs, and the NGRX Store architecture, as well as the Angular platform, in order to use it efficiently, and to maintain the application with good performance and scalability.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It's important to consider these downsides when deciding whether to use NGRX Store in your application, and to weigh the benefits against the potential costs. In many cases, NGRX Store can be a powerful tool for managing state in Angular applications, but it may not be the best choice for every situation.&lt;/p&gt;

&lt;h1&gt;
  
  
  How can I learn more?
&lt;/h1&gt;

&lt;p&gt;There are many resources available to help you learn more about NGRX Store, here are a few places to start:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Official documentation: The official NGRX Store documentation is a great resource to start learning about NGRX Store. It provides detailed explanations of all the concepts and tools, as well as examples of how to use them.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Online tutorials: There are many online tutorials and courses available that can help you learn NGRX Store. Some popular platforms include YouTube, Udemy, and Pluralsight. These tutorials can help you learn the basics of NGRX Store and provide you with a solid foundation to build upon.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Books: There are also some books that are available, such as "ngrx: in Action" which can help you dive deeper into the concepts of NGRX and how to use it in a real-world scenario.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Community and Blogs : You can also find a lot of information on blogs and discussion forums, from tutorials to best practices, from people who have experience with NGRX Store and are willing to share their knowledge with the community.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Try it out: The best way to learn is to try it out. Building a small scale application with NGRX Store will give you a much better understanding of how it works and how to use it effectively.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;NGRX's community: The NGRX community is strong and active, you can join the community on platforms like slack, gitter or stack overflow and ask questions and get help with the issues you are facing.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;In addition to these resources, it's also important to keep in mind that learning is an ongoing process, you will learn more as you work with NGRX store and encounter new challenges and edge cases.&lt;/p&gt;

&lt;h1&gt;
  
  
  Alternatives
&lt;/h1&gt;

&lt;p&gt;There are several other libraries and tools available for managing state in Angular applications, here are a few alternatives to NGRX Store:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Angular's built-in services: Angular provides several built-in services for managing state, such as ChangeDetectorRef, EventEmitter, and Subject. These services can be used to share data between components and services, but they lack some of the advanced features provided by NGRX Store, such as immutability, undo/redo functionality and centralized state management.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Akita: It is a lightweight state management library, similar to NGRX store that is built on top of RxJS and it is designed to be simple and easy to use, it also provides powerful tools for managing the state, such as Actions, Reducers, and Effects.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;MobX : It is another popular state management library, which is not specific to Angular, but it can be integrated with Angular. It provides a simple and intuitive way to manage the state and it has a simple and easy to understand API, that make it easy to start with, but it lack immutability and undo/redo functionality by default.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Apollo Client: It is mainly a GraphQL client, but it has a built-in state management solution as well, it can be a good choice for managing the state of data retrieved from a GraphQL server, it has a lot of features, but it's mainly optimized for GraphQL.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Vanilla Redux: The original Redux is a library for managing state in JavaScript applications, it's not specific to Angular, but you can still use it in an Angular application. It provides a simple and predictable way to manage the state, but it requires more boilerplate to use it in Angular.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Ultimately, the best choice will depend on the needs of your specific application and the preferences of your development team. It's important to evaluate the features, performance and complexity of each library, as well as their adaptability to your use case, before making a final decision.&lt;/p&gt;

&lt;h1&gt;
  
  
  Conclusion
&lt;/h1&gt;

&lt;p&gt;NGRX Store is a powerful tool for managing state in Angular applications, and it's a well-established and widely used library. It provides a centralized state management approach, using immutability and a set of powerful tools such as Actions, Reducers and Effects. These tools provide many benefits such as predictability, testability, scalability, and making the application more maintainable.&lt;/p&gt;

&lt;p&gt;However, like any tool, NGRX Store isn't a silver bullet, and it may not be the best choice for every situation. There is a learning curve and some added complexity associated with using NGRX Store, and it may not be necessary for applications with simple state. It's important to weigh the benefits and downsides of NGRX Store before deciding to use it in your application, and to consider the requirements of your specific use case.&lt;/p&gt;

&lt;p&gt;In conclusion, NGRX Store is a powerful library for managing state in Angular applications, and it's a great tool for large or complex state, real-time applications, undo/redo functionality and multi-module applications. But it's important to understand its complexity, performance and requirements before deciding to use it, and to consider the alternatives that might suit better the application needs.&lt;/p&gt;

</description>
      <category>ngr</category>
      <category>redux</category>
      <category>angular</category>
    </item>
  </channel>
</rss>
