Angular: Reuse reducer and selectors in different roots (not using redux)

Question

I do have different routes

/department

/candidates

/candidates-department

I have to use the same reducer structure (state and action) in /candidates and /candidates-department. The candidate part is common with minor difference in fetching data from api and having that data in store.

so /candidates will list all candidates, but for /candidates-department we do have department list that shows candidates corresponding to that department.

Is there any way I can use the same store/action/reducer from /candidates in /candidates-department with only difference in feature key in both /candidates and /candidates-department.

I need to reuse selectors as well.

Answer 1

ngrx provides a single storage for a single StoreModule.forRoot. All its children will use the same store.

If you want to achieve desired behavior you need to change the structure of your app so that StoreModule.forRoot is called in a child module that belongs to the rote.

If you need to call StoreModule.forRoot in AppModule due to other dependencies, then bad news, there's no way to split contexts for child modules of a parent with StoreModule.forRoot.

If you need it - try to add to your actions a property that points to a key. And then respect this key in reducers and selectors. It requires more coding, but that's the only way to split it currently.