feat(router-store): add action creator for root router actions (#2272)

Closes #2206

Author: Jefiozie

modules/router-store/src/actions.ts

@@ -8,6 +8,7 @@ import {
 
 import { BaseRouterStoreState } from './serializers/base';
 import { SerializedRouterStateSnapshot } from './serializers/default_serializer';
+import { createAction, props } from '@ngrx/store';
 
 /**
  * An action dispatched when a router navigation request is fired.
@@ -34,6 +35,10 @@ export type RouterRequestAction<
   payload: RouterRequestPayload<T>;
 };
 
+export const routerRequestAction = createAction(
+  ROUTER_REQUEST,
+  props<{ payload: RouterRequestPayload<SerializedRouterStateSnapshot> }>()
+);
 /**
  * An action dispatched when the router navigates.
  */
@@ -59,6 +64,11 @@ export type RouterNavigationAction<
   payload: RouterNavigationPayload<T>;
 };
 
+export const routerNavigationAction = createAction(
+  ROUTER_NAVIGATION,
+  props<{ payload: RouterNavigationPayload<SerializedRouterStateSnapshot> }>()
+);
+
 /**
  * An action dispatched when the router cancels navigation.
  */
@@ -87,6 +97,11 @@ export type RouterCancelAction<
   payload: RouterCancelPayload<T, V>;
 };
 
+export const routerCancelAction = createAction(
+  ROUTER_CANCEL,
+  props<{ payload: RouterCancelPayload<SerializedRouterStateSnapshot> }>()
+);
+
 /**
  * An action dispatched when the router errors.
  */
@@ -115,6 +130,11 @@ export type RouterErrorAction<
   payload: RouterErrorPayload<T, V>;
 };
 
+export const routerErrorAction = createAction(
+  ROUTER_ERROR,
+  props<{ payload: RouterErrorPayload<SerializedRouterStateSnapshot> }>()
+);
+
 /**
  * An action dispatched after navigation has ended and new route is active.
  */
@@ -140,6 +160,11 @@ export type RouterNavigatedAction<
   payload: RouterNavigatedPayload<T>;
 };
 
+export const routerNavigatedAction = createAction(
+  ROUTER_NAVIGATED,
+  props<{ payload: RouterNavigatedPayload<SerializedRouterStateSnapshot> }>()
+);
+
 /**
  * A union type of router actions.
  */

modules/router-store/src/index.ts

@@ -15,6 +15,11 @@ export {
   RouterNavigationPayload,
   RouterRequestAction,
   RouterRequestPayload,
+  routerCancelAction,
+  routerErrorAction,
+  routerNavigatedAction,
+  routerNavigationAction,
+  routerRequestAction,
 } from './actions';
 export { routerReducer, RouterReducerState } from './reducer';
 export {

projects/ngrx.io/content/guide/router-store/actions.md

@@ -1,50 +1,56 @@
 # Router Actions
 
-Router Store provides five navigation actions which are dispatched in a specific order. The `routerReducer` provided by Router Store updates its state with the latest router state given by the actions.
-
-## Order of actions
-
-Success case:
-
-- `ROUTER_REQUEST`
-- `ROUTER_NAVIGATION`
-- `ROUTER_NAVIGATED`
-
-Error / Cancel case (with early Navigation Action Timing):
-
-- `ROUTER_REQUEST`
-- `ROUTER_NAVIGATION`
-- `ROUTER_CANCEL` / `ROUTER_ERROR`
-
-Error / Cancel case (with late Navigation Action Timing):
-
-- `ROUTER_REQUEST`
-- `ROUTER_CANCEL` / `ROUTER_ERROR`
+Router Store provides five navigation actions which are dispatched in a specific order. The `routerReducer` provided by Router Store updates its state with the latest router state given by the actions. By default we recommend to use the creator functions we provide.
 
 ## Actions
 
-### ROUTER_REQUEST
+### routerRequestAction
 
 At the start of each navigation, the router will dispatch a `ROUTER_REQUEST` action.
 
-### ROUTER_NAVIGATION
+### routerNavigationAction
 
 During navigation, before any guards or resolvers run, the router will dispatch a `ROUTER_NAVIGATION` action.
 
 If you want the `ROUTER_NAVIGATION` to be dispatched after guards or resolvers run, change the Navigation Action Timing.
 
-### ROUTER_NAVIGATED
+### routerNavigatedAction
 
 After a successful navigation, the router will dispatch a `ROUTER_NAVIGATED` action.
 
-### ROUTER_CANCEL
+### routerCancelAction
 
 When the navigation is cancelled, for example due to a guard saying that the user cannot access the requested page, the router will dispatch a `ROUTER_CANCEL` action.
 
 The action contains the store state before the navigation. You can use it to restore the consistency of the store.
 
-### ROUTER_ERROR
+### routerErrorAction
 
 When there is an error during navigation, the router will dispatch a `ROUTER_ERROR` action.
 
 The action contains the store state before the navigation. You can use it to restore the consistency of the store.
+
+<div class="alert is-important">
+
+**Note:** You can also still use the action type, which was the previously defined way before action creators were introduced in NgRx. If you are looking for examples of the action types, visit the documentation for [versions 7.x and prior](https://v7.ngrx.io/guide/router-store/actions).
+
+</div>
+
+## Order of actions
+
+Success case:
+
+- `ROUTER_REQUEST`
+- `ROUTER_NAVIGATION`
+- `ROUTER_NAVIGATED`
+
+Error / Cancel case (with early Navigation Action Timing):
+
+- `ROUTER_REQUEST`
+- `ROUTER_NAVIGATION`
+- `ROUTER_CANCEL` / `ROUTER_ERROR`
+
+Error / Cancel case (with late Navigation Action Timing):
+
+- `ROUTER_REQUEST`
+- `ROUTER_CANCEL` / `ROUTER_ERROR`