CODEWITHSUNDEEP
ngrxangular-library
cobolstinks
cobolstinks

Reputation: 7153

Angular Component Library Project with NGRX?

I've used NGRX for a few projects now and generally really like it. But I'm struggling with whether or not to use it in my next project which will be to create an angular component library.

Is it recommended to use ngrx in angular library project types? How would you setup the root state vs the feature state? Would my library project's main module attach to the ngrx root store? If so then if my library is used in a parent app that is also using ngrx would the root store's collide?

Update (More Context):

The majority of the components in the library will be typical forms of data type of stuff. For example providing components to search, update, create and delete things across multiple applications. We're packaging them up as a component library (and angular elements library) because they will need to be used in multiple web applications until those web applications converge into one new super web application (time line for convergence is 1+ year down the road). The other integration path we were looking at was loading an iframe in all these client apps.

The components themselves will connect to an API layer to do all the data I/O. Components may need to share parts of state across components.

Upvotes: 2

Views: 3215

Answers (2)

Oveis
Oveis

Reputation: 89

I was responsible to develop a big library containing many coupled components and I came up to use ngrx in the library.

I assume you are familiar with ngrx and implemented the required files for a state (actions, reducers, selectors, etc).

here are my steps to use ngrx in an angular library:

step 1: add ngrx dependencies (store, effect, entity, etc) to the main project

"@ngrx/effects": "^16.1.0",
"@ngrx/entity": "^16.1.0",
"@ngrx/store": "^16.1.0",

step 2: add ngrx dependencies (store, effect, entity, etc) to the library project

"@ngrx/effects": "^16.1.0",
"@ngrx/entity": "^16.1.0",
"@ngrx/store": "^16.1.0",

note: update peerDependencies in the library too

step 3: initial ngrx modules in the app.module.ts with forRoot method

StoreModule.forRoot({}),
EffectsModule.forRoot([]),

step 4: initial ngrx modules in the library module with forFeature method

StoreModule.forFeature(TEST_FEATURE_NAME,{testPage: testPageReducer}),
EffectsModule.forFeature([]), // no effects for now

Upvotes: 0

timdeschryver
timdeschryver

Reputation: 15525

This is hard to answer without having the full context.

If we're speaking about a "pure" component library, I would rather not pull in any state management libraries. If the component needs some state, it should manage its state on its own.

Components using this library can always be in control of the communication with the store.

Upvotes: 3

Related Questions