docs: add guides for standalone APIs in module-based apps (#3854)

Author: KylerJohnsonDev

projects/ngrx.io/content/guide/effects/index.md

@@ -346,6 +346,32 @@ The `EffectsModule.forFeature()` method or `provideEffects()` function must be a
 
 </div>
 
+## Standalone API in module-based apps
+
+If you have a module-based Angular application, you can still use standalone components. NgRx standalone APIs support this workflow as well.
+
+For module-based apps, you have the `EffectsModule.forRoot([...])` included in the `imports` array of your `AppModule`, which registers the root effects for dependency injection. For a standalone component with feature state/effects registered in its route configuration to successfully run effects, you will need to use the `provideEffects([...])` function in the `providers` array of your `AppModule` to register the injection token. For module-based with standalone components, you will simply have both. 
+
+<code-example header="app.module.ts">
+import { NgModule } from '@angular/core';
+import { EffectsModule, provideEffects } from '@ngrx/effects';
+
+import { MoviesEffects } from './effects/movies.effects';
+import * as actorsEffects from './effects/actors.effects';
+
+@NgModule({
+  imports: [
+    EffectsModule.forRoot(MoviesEffects, actorsEffects),
+  ],
+  providers: [
+    provideEffects(MoviesEffects, actorsEffects)
+  ]
+})
+export class AppModule {}
+</code-example>
+
+<div class="alert is-critical">
+
 ## Incorporating State
 
 If additional metadata is needed to perform an effect besides the initiating action's `type`, we should rely on passed metadata from an action creator's `props` method.

projects/ngrx.io/content/guide/store/reducers.md

@@ -272,6 +272,30 @@ After the feature is loaded, the `game` key becomes a property in the object and
 ```
 
 Whether your feature states are loaded eagerly or lazily depends on the needs of your application. You use feature states to build up your state object over time and through different feature areas.
+  
+## Standalone API in module-based apps
+
+If you have a module-based Angular application, you can still use standalone components. NgRx standalone APIs support this workflow as well.
+
+For module-based apps, you have the `StoreModule.forRoot({...})` included in the `imports` array of your `AppModule`, which registers the root store for dependency injection. Standalone components look for a different injection token that can only be provided by the `provideStore({...})` function detailed above. In order to use NgRx in a standalone component, you must first add the `provideStore({...})` function the the `providers` array in your `AppModule` with the same configuration you have inside of your `forRoot({...})`. For module-based apps with standalone components, you will simply have both. 
+
+<code-example header="app.module.ts">
+  import { NgModule } from '@angular/core';
+  import { StoreModule, provideStore } from '@ngrx/store';
+  import { scoreboardReducer } from './reducers/scoreboard.reducer';
+
+  @NgModule({
+    imports: [
+      StoreModule.forRoot({ game: scoreboardReducer })
+    ],
+    providers: [
+      provideStore({ game: scoreboardReducer })
+    ]
+  })
+  export class AppModule {}
+</code-example>
+  
+Note: Similarly, if you are using effects, you will need to register both `EffectsModule.forRoot([...])` and `provideEffects([...])`. For more info, see [Effects](guide/effects).
 
 ## Next Steps