refactor(example-app): use create action group function for actions (#…

…4239)
ngrx · Feb 14, 2024 · 4b310dd · 4b310dd
1 parent b90da9d
commit 4b310dd
Show file tree

Hide file tree

Showing 45 changed files with 170 additions and 208 deletions.
diff --git a/projects/example-app/src/app/auth/actions/auth-api.actions.ts b/projects/example-app/src/app/auth/actions/auth-api.actions.ts
@@ -1,14 +1,11 @@
-import { props, createAction } from '@ngrx/store';
+import { props, createActionGroup, emptyProps } from '@ngrx/store';
 import { User } from '@example-app/auth/models';
 
-export const loginSuccess = createAction(
-  '[Auth/API] Login Success',
-  props<{ user: User }>()
-);
-
-export const loginFailure = createAction(
-  '[Auth/API] Login Failure',
-  props<{ error: any }>()
-);
-
-export const loginRedirect = createAction('[Auth/API] Login Redirect');
+export const AuthApiActions = createActionGroup({
+  source: 'Auth/API',
+  events: {
+    'Login Success': props<{ user: User }>(),
+    'Login Failure': props<{ error: any }>(),
+    'Login Redirect': emptyProps(),
+  },
+});
diff --git a/projects/example-app/src/app/auth/actions/auth.actions.ts b/projects/example-app/src/app/auth/actions/auth.actions.ts
@@ -1,7 +1,10 @@
-import { createAction } from '@ngrx/store';
+import { createActionGroup, emptyProps } from '@ngrx/store';
 
-export const logout = createAction('[Auth] Logout');
-export const logoutConfirmation = createAction('[Auth] Logout Confirmation');
-export const logoutConfirmationDismiss = createAction(
-  '[Auth] Logout Confirmation Dismiss'
-);
+export const AuthActions = createActionGroup({
+  source: 'Auth',
+  events: {
+    Logout: emptyProps(),
+    'Logout Confirmation': emptyProps(),
+    'Logout Confirmation Dismiss': emptyProps(),
+  },
+});
diff --git a/projects/example-app/src/app/auth/actions/index.ts b/projects/example-app/src/app/auth/actions/index.ts
diff --git a/projects/example-app/src/app/auth/actions/login-page.actions.ts b/projects/example-app/src/app/auth/actions/login-page.actions.ts
@@ -1,7 +1,9 @@
-import { createAction, props } from '@ngrx/store';
+import { createActionGroup, props } from '@ngrx/store';
 import { Credentials } from '@example-app/auth/models';
 
-export const login = createAction(
-  '[Login Page] Login',
-  props<{ credentials: Credentials }>()
-);
+export const LoginPageActions = createActionGroup({
+  source: 'Login Page',
+  events: {
+    Login: props<{ credentials: Credentials }>(),
+  },
+});
diff --git a/projects/example-app/src/app/auth/containers/login-page.component.spec.ts b/projects/example-app/src/app/auth/containers/login-page.component.spec.ts
@@ -4,7 +4,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { LoginPageComponent } from '@example-app/auth/containers';
 import { LoginFormComponent } from '@example-app/auth/components';
 import * as fromAuth from '@example-app/auth/reducers';
-import { LoginPageActions } from '@example-app/auth/actions';
+import { LoginPageActions } from '@example-app/auth/actions/login-page.actions';
 import { provideMockStore, MockStore } from '@ngrx/store/testing';
 import { MaterialModule } from '@example-app/material';
 

diff --git a/projects/example-app/src/app/auth/containers/login-page.component.ts b/projects/example-app/src/app/auth/containers/login-page.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Credentials } from '@example-app/auth/models';
 import * as fromAuth from '@example-app/auth/reducers';
-import { LoginPageActions } from '@example-app/auth/actions';
+import { LoginPageActions } from '@example-app/auth/actions/login-page.actions';
 
 @Component({
   selector: 'bc-login-page',

diff --git a/projects/example-app/src/app/auth/effects/auth.effects.spec.ts b/projects/example-app/src/app/auth/effects/auth.effects.spec.ts
@@ -5,11 +5,9 @@ import { Actions } from '@ngrx/effects';
 import { provideMockActions } from '@ngrx/effects/testing';
 import { cold, hot } from 'jasmine-marbles';
 import { Observable, of } from 'rxjs';
-import {
-  LoginPageActions,
-  AuthActions,
-  AuthApiActions,
-} from '@example-app/auth/actions';
+import { LoginPageActions } from '@example-app/auth/actions/login-page.actions';
+import { AuthApiActions } from '@example-app/auth/actions/auth-api.actions';
+import { AuthActions } from '@example-app/auth/actions/auth.actions';
 
 import { Credentials, User } from '@example-app/auth/models';
 import { AuthService } from '@example-app/auth/services';

diff --git a/projects/example-app/src/app/auth/effects/auth.effects.ts b/projects/example-app/src/app/auth/effects/auth.effects.ts
@@ -4,15 +4,13 @@ import { Router } from '@angular/router';
 import { Actions, ofType, createEffect } from '@ngrx/effects';
 import { of } from 'rxjs';
 import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
-import {
-  LoginPageActions,
-  AuthActions,
-  AuthApiActions,
-} from '@example-app/auth/actions';
+import { LoginPageActions } from '@example-app/auth/actions/login-page.actions';
+import { AuthApiActions } from '@example-app/auth/actions/auth-api.actions';
+import { AuthActions } from '@example-app/auth/actions/auth.actions';
 import { Credentials } from '@example-app/auth/models';
 import { AuthService } from '@example-app/auth/services';
 import { LogoutConfirmationDialogComponent } from '@example-app/auth/components';
-import { UserActions } from '@example-app/core/actions';
+import { UserActions } from '@example-app/core/actions/user.actions';
 
 @Injectable()
 export class AuthEffects {

diff --git a/projects/example-app/src/app/auth/reducers/auth.reducer.spec.ts b/projects/example-app/src/app/auth/reducers/auth.reducer.spec.ts
@@ -1,6 +1,7 @@
 import { reducer } from '@example-app/auth/reducers/auth.reducer';
 import * as fromAuth from '@example-app/auth/reducers/auth.reducer';
-import { AuthApiActions, AuthActions } from '@example-app/auth/actions';
+import { AuthApiActions } from '@example-app/auth/actions/auth-api.actions';
+import { AuthActions } from '@example-app/auth/actions/auth.actions';
 
 import { User } from '@example-app/auth/models';
 

diff --git a/projects/example-app/src/app/auth/reducers/auth.reducer.ts b/projects/example-app/src/app/auth/reducers/auth.reducer.ts
@@ -1,5 +1,6 @@
 import { createReducer, on } from '@ngrx/store';
-import { AuthApiActions, AuthActions } from '@example-app/auth/actions';
+import { AuthApiActions } from '@example-app/auth/actions/auth-api.actions';
+import { AuthActions } from '@example-app/auth/actions/auth.actions';
 import { User } from '@example-app/auth/models';
 
 export const statusFeatureKey = 'status';

diff --git a/projects/example-app/src/app/auth/reducers/login-page.reducer.spec.ts b/projects/example-app/src/app/auth/reducers/login-page.reducer.spec.ts
@@ -1,7 +1,8 @@
 import { reducer } from '@example-app/auth/reducers/login-page.reducer';
 import * as fromLoginPage from '@example-app/auth/reducers/login-page.reducer';
 
-import { AuthApiActions, LoginPageActions } from '@example-app/auth/actions';
+import { LoginPageActions } from '@example-app/auth/actions/login-page.actions';
+import { AuthApiActions } from '@example-app/auth/actions/auth-api.actions';
 
 import { Credentials, User } from '@example-app/auth/models';
 

diff --git a/projects/example-app/src/app/auth/reducers/login-page.reducer.ts b/projects/example-app/src/app/auth/reducers/login-page.reducer.ts
@@ -1,4 +1,5 @@
-import { AuthApiActions, LoginPageActions } from '@example-app/auth/actions';
+import { AuthApiActions } from '@example-app/auth/actions/auth-api.actions';
+import { LoginPageActions } from '@example-app/auth/actions/login-page.actions';
 import { createReducer, on } from '@ngrx/store';
 
 export const loginPageFeatureKey = 'loginPage';

diff --git a/projects/example-app/src/app/auth/services/auth-guard.service.ts b/projects/example-app/src/app/auth/services/auth-guard.service.ts
@@ -2,7 +2,7 @@ import { inject } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { map, take } from 'rxjs/operators';
-import { AuthApiActions } from '@example-app/auth/actions';
+import { AuthApiActions } from '@example-app/auth/actions/auth-api.actions';
 import * as fromAuth from '@example-app/auth/reducers';
 
 export const authGuard = (): Observable<boolean> => {

diff --git a/projects/example-app/src/app/books/actions/book.actions.ts b/projects/example-app/src/app/books/actions/book.actions.ts
@@ -1,8 +1,10 @@
-import { createAction, props } from '@ngrx/store';
+import { createActionGroup, props } from '@ngrx/store';
 
 import { Book } from '@example-app/books/models';
 
-export const loadBook = createAction(
-  '[Book Exists Guard] Load Book',
-  props<{ book: Book }>()
-);
+export const BookActions = createActionGroup({
+  source: 'Book Exists Guard',
+  events: {
+    'Load Book': props<{ book: Book }>(),
+  },
+});
diff --git a/projects/example-app/src/app/books/actions/books-api.actions.ts b/projects/example-app/src/app/books/actions/books-api.actions.ts
@@ -1,13 +1,11 @@
-import { createAction, props } from '@ngrx/store';
+import { createActionGroup, props } from '@ngrx/store';
 
 import { Book } from '@example-app/books/models';
 
-export const searchSuccess = createAction(
-  '[Books/API] Search Success',
-  props<{ books: Book[] }>()
-);
-
-export const searchFailure = createAction(
-  '[Books/API] Search Failure',
-  props<{ errorMsg: string }>()
-);
+export const BooksApiActions = createActionGroup({
+  source: 'Books/API',
+  events: {
+    'Search Success': props<{ books: Book[] }>(),
+    'Search Failure': props<{ errorMsg: string }>(),
+  },
+});
diff --git a/projects/example-app/src/app/books/actions/collection-api.actions.ts b/projects/example-app/src/app/books/actions/collection-api.actions.ts
@@ -1,42 +1,26 @@
-import { createAction, props } from '@ngrx/store';
+import { createActionGroup, props } from '@ngrx/store';
 
 import { Book } from '@example-app/books/models';
 
-/**
- * Add Book to Collection Actions
- */
-export const addBookSuccess = createAction(
-  '[Collection/API] Add Book Success',
-  props<{ book: Book }>()
-);
+export const CollectionApiActions = createActionGroup({
+  source: 'Collection/API',
+  events: {
+    /**
+     * Add Book to Collection Actions
+     */
+    'Add Book Success': props<{ book: Book }>(),
+    'Add Book Failure': props<{ book: Book }>(),
 
-export const addBookFailure = createAction(
-  '[Collection/API] Add Book Failure',
-  props<{ book: Book }>()
-);
+    /**
+     * Remove Book from Collection Actions
+     */
+    'Remove Book Success': props<{ book: Book }>(),
+    'Remove Book Failure': props<{ book: Book }>(),
 
-/**
- * Remove Book from Collection Actions
- */
-export const removeBookSuccess = createAction(
-  '[Collection/API] Remove Book Success',
-  props<{ book: Book }>()
-);
-
-export const removeBookFailure = createAction(
-  '[Collection/API] Remove Book Failure',
-  props<{ book: Book }>()
-);
-
-/**
- * Load Collection Actions
- */
-export const loadBooksSuccess = createAction(
-  '[Collection/API] Load Books Success',
-  props<{ books: Book[] }>()
-);
-
-export const loadBooksFailure = createAction(
-  '[Collection/API] Load Books Failure',
-  props<{ error: any }>()
-);
+    /**
+     * Load Collection Actions
+     */
+    'Load Books Success': props<{ books: Book[] }>(),
+    'Load Books Failure': props<{ error: any }>(),
+  },
+});
diff --git a/projects/example-app/src/app/books/actions/collection-page.actions.ts b/projects/example-app/src/app/books/actions/collection-page.actions.ts
@@ -1,6 +1,11 @@
-import { createAction } from '@ngrx/store';
+import { createActionGroup, emptyProps } from '@ngrx/store';
 
-/**
- * Load Collection Action
- */
-export const enter = createAction('[Collection Page] Enter');
+export const CollectionPageActions = createActionGroup({
+  source: 'Collection Page',
+  events: {
+    /**
+     * Load Collection Action
+     */
+    Enter: emptyProps(),
+  },
+});
diff --git a/projects/example-app/src/app/books/actions/find-book-page.actions.ts b/projects/example-app/src/app/books/actions/find-book-page.actions.ts
@@ -1,6 +1,8 @@
-import { createAction, props } from '@ngrx/store';
+import { createActionGroup, props } from '@ngrx/store';
 
-export const searchBooks = createAction(
-  '[Find Book Page] Search Books',
-  props<{ query: string }>()
-);
+export const FindBookPageActions = createActionGroup({
+  source: 'Find Book Page',
+  events: {
+    'Search Books': props<{ query: string }>(),
+  },
+});
diff --git a/projects/example-app/src/app/books/actions/index.ts b/projects/example-app/src/app/books/actions/index.ts
diff --git a/projects/example-app/src/app/books/actions/selected-book-page.actions.ts b/projects/example-app/src/app/books/actions/selected-book-page.actions.ts
@@ -1,19 +1,18 @@
-import { createAction, props } from '@ngrx/store';
+import { createActionGroup, props } from '@ngrx/store';
 
 import { Book } from '@example-app/books/models';
 
-/**
- * Add Book to Collection Action
- */
-export const addBook = createAction(
-  '[Selected Book Page] Add Book',
-  props<{ book: Book }>()
-);
+export const SelectedBookPageActions = createActionGroup({
+  source: 'Selected Book Page',
+  events: {
+    /**
+     * Add Book to Collection Action
+     */
+    'Add Book': props<{ book: Book }>(),
 
-/**
- * Remove Book from Collection Action
- */
-export const removeBook = createAction(
-  '[Selected Book Page] Remove Book',
-  props<{ book: Book }>()
-);
+    /**
+     * Remove Book from Collection Action
+     */
+    'Remove Book': props<{ book: Book }>(),
+  },
+});
diff --git a/projects/example-app/src/app/books/actions/view-book-page.actions.ts b/projects/example-app/src/app/books/actions/view-book-page.actions.ts
@@ -1,6 +1,8 @@
-import { createAction, props } from '@ngrx/store';
+import { createActionGroup, props } from '@ngrx/store';
 
-export const selectBook = createAction(
-  '[View Book Page] Select Book',
-  props<{ id: string }>()
-);
+export const ViewBookPageActions = createActionGroup({
+  source: 'View Book Page',
+  events: {
+    'Select Book': props<{ id: string }>(),
+  },
+});
diff --git a/projects/example-app/src/app/books/containers/collection-page.component.spec.ts b/projects/example-app/src/app/books/containers/collection-page.component.spec.ts
@@ -4,7 +4,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 
-import { CollectionPageActions } from '@example-app/books/actions';
+import { CollectionPageActions } from '@example-app/books/actions/collection-page.actions';
 import {
   BookAuthorsComponent,
   BookPreviewComponent,

diff --git a/projects/example-app/src/app/books/containers/collection-page.component.ts b/projects/example-app/src/app/books/containers/collection-page.component.ts
@@ -3,7 +3,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 
-import { CollectionPageActions } from '@example-app/books/actions';
+import { CollectionPageActions } from '@example-app/books/actions/collection-page.actions';
 import { Book } from '@example-app/books/models';
 import * as fromBooks from '@example-app/books/reducers';
 

diff --git a/projects/example-app/src/app/books/containers/find-book-page.component.spec.ts b/projects/example-app/src/app/books/containers/find-book-page.component.spec.ts
@@ -5,7 +5,7 @@ import { RouterTestingModule } from '@angular/router/testing';
 
 import { MockStore, provideMockStore } from '@ngrx/store/testing';
 
-import { FindBookPageActions } from '@example-app/books/actions';
+import { FindBookPageActions } from '@example-app/books/actions/find-book-page.actions';
 import {
   BookAuthorsComponent,
   BookPreviewComponent,

diff --git a/projects/example-app/src/app/books/containers/find-book-page.component.ts b/projects/example-app/src/app/books/containers/find-book-page.component.ts
@@ -4,7 +4,7 @@ import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import { take } from 'rxjs/operators';
 
-import { FindBookPageActions } from '@example-app/books/actions';
+import { FindBookPageActions } from '@example-app/books/actions/find-book-page.actions';
 import { Book } from '@example-app/books/models';
 import * as fromBooks from '@example-app/books/reducers';