Ngrx component lib

Hi all,
Would you use Ngrx for managing state of an Angular component lib (each component takes care of its own data loading and handling using ngrx)? Alternatively, would you rather make all components in the lib ‘dumb’ and let the consuming app fetch their data, handle their outputs etc?

Hi, welcome to InDepth Dev :grinning:

I’m using Ngrx at work in libraries so here is my experience. You can do it easily by having StoreModule.forFeature (multiple times if necessary) and EffectsModule.forFeature in the library module.

The drawbacks I see of having a state reserved to the libraries are:

  • the library is reserved to apps using NgRx (maybe the benefits of NgRx doesn’t worth it here)
  • you need to export selectors & actions for the library consumer
  • the library state isn’t private, you can see it from the app (and you may have feature name collision)

It doesn’t means there are only drawbacks for this approach. The integration with app using NgRx will be very smooth and easy, you just have to import the library module and that’s it.

About choosing between dumb and smart component for you library. I think it depends of your use case. For a presentational component (such as Material Angular) or if the data the component need is never the same, dumb component seems better. Besides, if your component always need the same data and you want the library to be plug’n’play, in this case smart component may be the way to go.

Hope it’ll help you for your choice, wait for other answers as well :wink:
Maybe more context would help to give a more accurate answer.