docs(store): update createActionGroup guide (#3878)

Author: markostanimirovic

projects/ngrx.io/content/guide/store/action-groups.md

@@ -1,26 +1,20 @@
 # Action Groups
 
-Action groups is a feature to group actions together that belong to the same source. While writing actions, the actions in most of the cases looks like below.
+<div class="video-container">
+  <div class="video-responsive-wrapper">
 
-<code-example header="products-page.actions.ts">
-import { createAction, props } from '@ngrx/store';
-
-export const opened = createAction('[Products Page] Opened');
+    <iframe
+      src="https://www.youtube.com/embed/rk83ZMqEDV4"
+      allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen
+      frameborder="0"
+    ></iframe>
 
-export const paginationChanged = createAction(
-  '[Products Page] Pagination Changed',
-  props&lt;{ page: number; offset: number }&gt;()
-);
-
-export const queryChanged = createAction(
-  '[Products Page] Query Changed',
-  (query: string) => ({ query })
-);
-</code-example>
+  </div>
+</div>
 
-
-In the example we can see that the source (`[Products Page])` is duplicated within each action. With the help of the `createActionGroup` API this can be avoided. 
-The next example leverages `createActionGroup` to group actions together that belong to the same source. This makes that defining actions is more compact.
+The `createActionGroup` function creates a group of action creators with the same source.
+It accepts an action group source and an event dictionary as input arguments, where an event is a key-value pair of an event name and event props.
 
 <code-example header="products-page.actions.ts">
 import { createActionGroup, emptyProps, props } from '@ngrx/store';
@@ -30,53 +24,88 @@ export const ProductsPageActions = createActionGroup({
   events: {
     // defining an event without payload using the `emptyProps` function
     'Opened': emptyProps(),
-    
+
     // defining an event with payload using the `props` function
     'Pagination Changed': props&lt;{ page: number; offset: number }&gt;(),
-    
+
     // defining an event with payload using the props factory
     'Query Changed': (query: string) => ({ query }),
-  }
+  },
 });
 </code-example>
 
-To dispatch an action from the group, import the group and invoke an action.
-This returns an action that you can then dispatch to the store.
+<div class="alert is-helpful">
+
+The `emptyProps` function is used to define an action creator without payload within an action group.
+
+</div>
 
-```typescript
+If we create a new action creator using the `createAction` function by copying the previous one but accidentally forget to change its type, the compilation will pass.
+Fortunately, this is not the case with the `createActionGroup` function because we will get a compilation error if two actions from the same group have the same type.
+
+The `createActionGroup` function returns a dictionary of action creators where the name of each action creator is created by camel-casing the event name, and the action type is created using the "[Source] Event Name" pattern.
+Also, there is no longer a need for barrel files or named imports because the action group can be imported directly into another file.
+
+<code-example header="products.component.ts">
+import { Component, inject, OnInit } from '@angular/core';
+import { Store } from '@ngrx/store';
 
 import { ProductsPageActions } from './products-page.actions';
 
 @Component({ /* ... */ })
 export class ProductsComponent implements OnInit {
-  constructor(private readonly store: Store) {}
+  private readonly store = inject(Store);
 
- ngOnInit(): void {
+  ngOnInit(): void {
     // action type: [Products Page] Opened
     this.store.dispatch(ProductsPageActions.opened());
   }
-  
+
   onPaginationChange(page: number, offset: number): void {
     // action type: [Products Page] Pagination Changed
-    this.store.dispatch(ProductsPageActions.paginationChanged({ page, offset }));
+    this.store.dispatch(
+      ProductsPageActions.paginationChanged({ page, offset })
+    );
   }
-  
+
   onQueryChange(query: string): void {
     // action type: [Products Page] Query Changed
     this.store.dispatch(ProductsPageActions.queryChanged(query));
   }
 }
+</code-example>
+
+## Alternative way of defining event names
+
+In the previous example, event names are defined in the title case format.
+In that case, it can be challenging to search for unused action creators because their names are automatically generated by camel-casing the event names.
 
-```
+The `createActionGroup` function provides the ability to define event names in the camel case format as well, so action creators will have the same names as events.
+This makes it easier to search for their usage within the codebase.
+
+<code-example header="products-api.actions.ts">
+import { createActionGroup, props } from '@ngrx/store';
+
+import { Product } from './product.model';
+
+export const ProductsApiActions = createActionGroup({
+  source: 'Products API',
+  events: {
+    productsLoadedSuccess: props&lt;{ products: Product[] }&gt;(),
+    productsLoadedFailure: props&lt;{ errorMsg: string }&gt;(),
+  },
+});
+
+// generated action creators:
+const {
+  productsLoadedSuccess, // type: "[Products API] productsLoadedSuccess"
+  productsLoadedFailure, // type: "[Products API] productsLoadedFailure"
+} = ProductsApiActions;
+</code-example>
 
 ## Limitations
 
 An action group uses the event names to create properties within the group that represent the action creators. 
 The action creator names are generated and are the camelCased version of the event names.
 For example, for the event name `Query Changed`, the action creator name will be `queryChanged`.
 Therefore, it is not possible to define action creators whose names differ from their event names using the `createActionGroup` function.
-
-You can read more about Action Groups:
-
-- [NgRx Action Group Creator](https://dev.to/ngrx/ngrx-action-group-creator-1deh)
-- [Creating Actions with NgRx Just Got Even Easier](https://www.youtube.com/watch?v=rk83ZMqEDV4)

projects/ngrx.io/src/styles/1-layouts/_doc-viewer.scss

@@ -2,3 +2,23 @@
   // Disable view transition animations.
   transition: none !important;
 }
+
+.video-container {
+  width: 100%;
+  max-width: 750px;
+  margin: auto;
+}
+
+.video-responsive-wrapper {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  height: 0;
+
+  > iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}