Skip to content

Commit fb9b172

Browse files
ThomasBurlesonbrandonroberts
authored andcommitted
docs(Store): add description for supporting feature modules using combineReducers and AoT (#1113)
1 parent 2a267b6 commit fb9b172

File tree

1 file changed

+58
-4
lines changed

1 file changed

+58
-4
lines changed

docs/store/api.md

+58-4
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,13 @@ export function getInitialState() {
4343
})
4444
```
4545

46-
## Meta Reducers
46+
## Meta-reducers
4747

48-
@ngrx/store composes your map of reducers into a single reducer. Use the `metaReducers`
49-
configuration option to provide an array of meta-reducers that are composed from right to left.
48+
@ngrx/store composes your map of reducers into a single reducer.
49+
50+
> Developers can think of meta-reducers as hooks into the action->reducer pipeline. Meta-reducers allow developers to pre-process actions before *normal* reducers are invoked.
51+
52+
Use the `metaReducers` configuration option to provide an array of meta-reducers that are composed from right to left.
5053

5154
Note: Meta-reducers in NgRx are similar to middleware used in Redux.
5255

@@ -96,6 +99,56 @@ export class FeatureModule {}
9699

97100
The feature state is added to the global application state once the feature is loaded. The feature state can then be selected using the [createFeatureSelector](./selectors.md#createFeatureSelector) convenience method.
98101

102+
## Feature Module Reducers and AOT
103+
104+
Developers can use:
105+
* `StoreModule.forFeature(<name>, <reducers map>, { initialState : <reducers initial state map>})`.
106+
* `StoreModule.forFeature(<name>, <reducers map> )`.
107+
108+
Due to AOT constraints, however, the following is not allowed:
109+
110+
```console
111+
StoreModule.forFeature(<name>, combineReducers(<reducers map>, <reducers initial state map>))
112+
```
113+
114+
Since the compiler needs to be able to statically analyze your code, you can’t call functions when defining metadata in the NgModule. In such cases, InjectionTokens are needed (see below):
115+
116+
Fortunately - with Feature modules - we can avoid injection tokens using the following approach:
117+
118+
```ts
119+
const initialStateA: Permissions = {
120+
list: A[],
121+
editMode: false
122+
};
123+
const _reducerA: ActionReducerMap<Permissions> = {
124+
list: A[],
125+
editMode: editModeReducer
126+
};
127+
128+
/**
129+
* Create `metaReducer` 1x...
130+
* while `reducerA()` is called for every action.
131+
*/
132+
const metaReducer = combineReducers(_reducerA, initialStateA);
133+
134+
export function reducerA(state, action) {
135+
return metaReducer(state, action);
136+
}
137+
```
138+
139+
and then the following will work with AOT:
140+
141+
```ts
142+
import { reducerA } from './state/a.reducer';
143+
144+
@NgModule({
145+
imports: [
146+
CommonModule,
147+
StoreModule.forFeature('a', reducerA),
148+
],
149+
})
150+
```
151+
99152
## Injecting Reducers
100153

101154
To inject the root reducers into your application, use an `InjectionToken` and a `Provider` to register the reducers through dependency injection.
@@ -159,7 +212,8 @@ export class FeatureModule {}
159212

160213
## Injecting Meta-Reducers
161214

162-
To inject meta reducers, use the `META_REDUCERS` injection token exported in
215+
216+
To inject 'middleware' meta reducers, use the `META_REDUCERS` injection token exported in
163217
the Store API and a `Provider` to register the meta reducers through dependency
164218
injection.
165219

0 commit comments

Comments
 (0)