Action logged but not triggered

Question

I have a module with a component that dispatches a FETCH action, which gets the data from the API and then dispatches a RECEIVED action. It's working perfectly.

Then I replicate the model, action and state to another module and component (with different fetch and receive) and it does not work. The logger shows the action as dispatched but the code is not executed.

documents.action.ts

export class FetchFolders {
  static readonly type = '[Documents] Fetch folders';

  constructor(public payload: string) { }
}

documents.state.ts

  @Action(FetchFolders)
  FetchFolders(state: StateContext<DocumentStateModel>, { payload }: FetchFolders) {
    console.log('inside');
    return this.http.get(`assets/fake-data/${payload}/documents.json`)
      .pipe(
        tap(result => this.store.dispatch(new ReceiveFolders(<DocumentFolder[]>result)))
      );
  }

I've reduced the code to the minimum to check if everything is working correctly. Also checked the imports (sometimes I get an import from the wrong lib) and still no luck.

Any idea of what's going on?

Answer 1

So the bit that I was missing was declaring it to the module

@NgModule({
  imports: [
    CommonModule,
    MenuModule,
    FormModule,
    RouterModule,
    NgxsModule.forFeature([DocumentState])
  ],
  declarations: [DocumentListComponent, DocumentsComponent],
  exports: [DocumentsComponent]
})
export class DocumentModule { }