title: How to register multiple NgRx stores in a strict mode Angular application?
body: <p>After having created a working store service based on <code>RxJs</code> and observables, I'm now trying to use the <code>NgRx</code> library instead.</p>
  <p>The application runs in strict mode and registering the store:</p>
  <pre><code>StoreModule.forRoot(
    { soundtracks: soundtrackReducer }
  ),
  </code></pre>
  <p>presents a compile time error:</p>
  <pre><code>Type '(state: SoundtrackState | undefined, action: SoundtrackActions) =&gt; SoundtrackState' is not assignable to type 'ActionReducer&lt;SoundtrackState, Action&gt;'.
    Types of parameters 'action' and 'action' are incompatible.
      Type 'Action' is not assignable to type 'SoundtrackActions'.
        Property 'error' is missing in type 'Action' but required in type 'PostFail'.ts(2322)
  </code></pre>
  <p>The actions are defined as:</p>
  <pre><code>export enum SoundtrackActionTypes {
    Add = '[Soundtrack] Add',
    PostFail = '[Soundtrack] Post Fail'
  }
  
  export class Add implements Action {
    public readonly type = SoundtrackActionTypes.Add;
    constructor(public soundtrack: Soundtrack) { }
  }
  
  export class PostFail implements Action {
    public readonly type = SoundtrackActionTypes.PostFail;
    constructor(public error: HttpErrorResponse) { }
  }
  
  export type SoundtrackActions = Add | PostFail;
  </code></pre>
  <p>And the reducer:</p>
  <pre><code>export interface SoundtrackState {
    data: Array&lt;Soundtrack&gt;;
    isLoading: boolean;
    message: string;
  }
  
  const initialSoundtrackState: SoundtrackState = {
    data: [],
    isLoading: false,
    message: ''
  };
  
  export function soundtrackReducer(state: SoundtrackState = initialSoundtrackState, action: SoundtrackActions): SoundtrackState {
    switch (action.type) {
      case SoundtrackActionTypes.Add: {
        const updatedData: Array&lt;Soundtrack&gt; = [...state['data']];
        updatedData.push(action.soundtrack);
        return {
          ...state,
          data: updatedData,
          isLoading: false,
          message: ''
        };
      }
      case SoundtrackActionTypes.PostFail: {
        return {
          data: [],
          isLoading: false,
          message: 'The soundtrack could not be posted'
        };
      }
      default: {
        return state;
      }
    }
  }
  </code></pre>
  <p>So I reckoned I should have a custom base action:</p>
  <pre><code>export interface CustomAction extends Action {
    type: string;
    payload?: any;
    error?: HttpErrorResponse;
  }
  </code></pre>
  <p>and use it for a post action as:</p>
  <pre><code>export class PostFail implements CustomAction {
    public readonly type = SoundtrackActionTypes.PostFail;
    constructor(public error: HttpErrorResponse) { }
  }
  </code></pre>
  <p>But I could not find out how to tell the registering call to consider this custom action.</p>
  <p>Other than that, is using a <code>switch</code> construct with classes the right way to create actions ? Should I not instead prefer using helper functions ? Something like:</p>
  <pre><code>export const add = createAction(SoundtrackActionTypes.Add, props&lt;{soundtrack: Soundtrack}&gt;());
  export const postFail = createAction(SoundtrackActionTypes.PostFail, props&lt;{error: HttpErrorResponse}&gt;());
  </code></pre>
  <p>But then, when creating this reducer:</p>
  <pre><code>const _soundtrackReducer = createReducer(initialSoundtrackState,
    on(add, (state, { soundtrack }) =&gt; {
      const updatedData: Array&lt;Soundtrack&gt; = [...state['data']];
      updatedData.push(soundtrack);
      return {
        ...state,
        data: updatedData,
        isLoading: false,
        message: ''
      };
    }),
    on(postFail, (state, { error }) =&gt; {
      return {
        data: [],
        isLoading: false,
        message: 'The soundtrack could not be posted'
      };
    })
  );
  
  export function soundtrackReducer(state: SoundtrackState | undefined, action: SoundtrackActions): SoundtrackState {
    return _soundtrackReducer(state, action);
  }
  </code></pre>
  <p>the registering still complains at compile time of a type mismatch, with the same compile time error.</p>
  <p>Also, when registering the store module:</p>
  <pre><code>StoreModule.forRoot(
    { soundtracks: soundtrackReducer }
  ),
  </code></pre>
  <p>What if I have multiple feature stores ? And a global preferences store as well ? How can I register all these stores ?</p>
  <p>UPDATE: I could resolve the compile time error by removing the union type in the reducer signature:</p>
  <pre><code>export function soundtrackReducer(state: SoundtrackState | undefined, action: Action): SoundtrackState {
    return _soundtrackReducer(state, action);
  }
  </code></pre>
  <p>Indeed the <code>SoundtrackActions</code> union type was not needed.</p>