Missing important recipe to use store for "library" modules

[montella1507]

We can find in documentation nice info about common usage of NGRX/Store. However, it is scoped to "root" and "feature" modules - it is subconsciously connected to AppModule (or CoreModule) and LazyLoaded modules.

I think one of the biggest power of Store is, it can be used similar to NGRX/Data for custom libraries.

To explain my proposal, lets have following parts in an application:

• generic datagrid (kendo, primeng, ...)
• generic store (for example - based on NGRX/Entity where 1 entity in entities is 1 "datagrid state" with currentPage, pageSize, filters, sorts, items (rows data)
• smart connector using that NGRX/Store (+ngrx/entity) internally...
• every instance of smart connector has set "unique id" to connect to correct "chunk" in NGRX/STORE

So usage will be like..

<connector [id]="unique-id-to-connect-to-store>
   <ng-template  let-data>
               <datagrid [page]="data.page" ></datagrid>
   </ng-template>
</connector>

---

Lets say, we would like to have 3 Lazy-loaded feature modules like:

• customers
• users
• orders

with their own grids connected to NGRX/Store and our "grid-data library" (backend meant as logic - generic reducers, actions, effects, crud services.. - similar to NGRX/Data)

What is the best way to do so? At the moment i think it is possible in this way:

• GridDataModule with imports: [
  StoreModule.forFeature('grids', genericGridReducer),
  EffectsModule.forFeature([genericGridEffects]),
  ]
• import this GridDataModule in lazy loaded modules Customers, Orders, Users...

It works... more.. it works like a charm, but is it correct way? Why does it work?

Why is it possible to import multiple times (in lazy loaded modules) a module with the same forFeature() definition? Why it isnt dropped and recreated?

Why it is possible to register multiple times the same effects, do we have multiple instances then?

I think this way (aka SomethingDataModule) is so powerfull concept of NGRX/xxxx it is worth to write about the correct way in the docs.

I would be willing to submit a PR for the docs ❤️

[x] Yes (Assistance is provided if you need help submitting a pull request)
[ ] No

[dummdidumm]

For services (effects) it works because the modules are lazy loaded. Because of this, angular creates a new injector context, and all services which are provided in your generic module will get instantiated again. If it works with StoreModule.forFeature like this with always the same name I don't know.

There also is a stackoverflow post related to your question: https://stackoverflow.com/questions/49537571/independent-instances-of-the-same-ngrx-feature-module

[montella1507]

Yeah, i know IT works And why it works (checked reducer Merge logic in forFeature method)..my issues Is about missing important recipe in documentation.

I Will create MR if NGRX team Is interested.

[wesleygrimes]

@montella1507 you should look into the work that @jrista is doing with NgRx auto entity. He’s using tokens to provide and over specific library level effects and reducers.

https://github.com/briebug/ngrx-auto-entity

[jrista]

@montella1507 As @wesleygrimes mentioned, I have used NgRx in a library I've created called NgRx Auto-Entity. In this library, I automatically register reducers (specifically, meta-reducers, which are a more viable approach in a library), as well as effects (although the functions I am using are not really documented, so we should either get them documented properly and make them official, or create another/better official way to register library effects in NgRx.)

In any case, I was able to fully encapsulate both reducers and effects within my library. My library's NgModules have .forRoot and .forFeature calls on them, so that you can prepare the library for use in either context in your consumer apps. You can take a look at the code I've used. There is some tricky stuff you have to deal with around lazy-loaded modules, due to the limitations of the Angular Injector (it does not really allow you to traverse or otherwise dynamically explore the Injector tree at runtime...so I had to track each lazy-loaded module's injector myself. That is beyond the scope of NgRx, though, and is simply an angular thing.)

[pedy711]

Hi everyone, I also want to use the store in my libraries without them having dependencies on main app. Could you please guide me through?

[AdditionAddict]

Mainly commenting to watch this issue.

Is this related to #1734?
I think together this explains why there isn’t a bigger number of libraries based on NgRx despite relatively large take up. It hasn’t been a good “mother”.

I’ve recently been doing a deeper dive into what NgRx Data is doing under the hood and it’s not easier to see how it could form a quick recipe...facade pattern that dispatches actions and provides selectors, factory pattern for data and collection services, services that keep registry of classes, binding reducer methods to actions, effects class to persist data calling services. Just graphing the internal imports of the library reveals the difficulty of which order to write these in if you wanted to replicate this library as a “pattern”. The data and collection classes are easy to extend. Extending the effects or actions is much much harder.

[michael-letcher]

Hey, just like @pedy711 I'm have lots of trouble doing this.

Especially seeing

Error during template compile of 'ProductsModule'
  Function calls are not supported in decorators but 'StoreModule' was called.

Due to StoreModule.forFeature(fromReducer.key, fromReducer.reducer).

Ivy is not ready recommended yet, so not sure what to do.

[jrista]

Even though we have not released a bigger version in a while, we have actually had NgRx Auto-Entity under continued development for most of the year. We are working on a 0.5.0 release which adds a lot of improvements to auto-entity. We will be following up with a 0.6.0 release which improves alignment with how NgRx 8+ work, and 0.7.0 with additional features and improved ng/ngrx support in the fall.

We think we've taken Auto-Entity beyond any other entity option so far, an with 0.6.0 will provide a means of customizing and integrating support into your own ngrx code that we don't believe has been achieved with any other ngrx addon library yet. Might be worth taking a look.

You can install 0.5.0-beta.1 to get a look at the most recent changes. 0.6.0-alphas should be dropping soon.

https://briebug.gitbook.io/ngrx-auto-entity/