What is the best folder structure for ngrx when lazy loading is used Angular 6?

Question

I have an Angular 6 app where lazy loading is used. My folder structure looks like this:

src
  app
    main
      products
      invoices
      customers
      suppliers
    core
      header
      footer
      services
      core.module.ts
    shared
    app-routing.module.ts
    app.component.html
    app.component.css
    app.component.spec.ts
    app.component.ts

I followed the recommended folder structure for lazy loading (here, each folder under the main folder is its own module section).

If I want to incorporate ngrx, I have seen differing opinions as to where to include the store, reducers, etc. One article I read said to add a store folder and include all of the ngrx pieces in there. Another article I read said to add the ngrx pieces to each module/section.

There is another stackoverflow article here: What is the best structure for app using ngrx? that talks about ngrx folder structure, but no mention of lazy loading.

Is there a recommended way to structure ngrx when lazy loading is used? Does it make more sense to add a store with reducers, actions, etc. to each module or to make one giant store folder with everything in that? This app is not too big; it's more of a medium sized application.

Thanks!

Answer 1

Absolutely add the ngrx pieces to each module separately. It gives you a good structure and every module is self-contained. Furthermore, the ngrx store in each module can be lazy loaded as well, so the state will only be there if you are loading the module.

Further details here: https://medium.com/@AnkurRatra/lazy-loading-of-modules-with-ngrx-store-4th-version-angular-2-23c93295d4e8