CODEWITHSUNDEEP
angulartypescriptecmascript-6reduxngrx
Arter
Arter

Reputation: 2324

After adding StoreModule.forFeature (...) can not access to stored data

I have multiple projects in one angular 8 app... Until now, I have in only one project @ngrx/store but now I added @ngrx/store in every project and because of multiple stores, I need in every projects in app.module import StoreModule.forFeature

imports: [
    StoreModule.forRoot({}),
    StoreModule.forFeature("project1store", fromStore.reducer1)
]

on the second project, I import

 imports: [
        StoreModule.forRoot({}),
        StoreModule.forFeature("project2store", fromStore.reducer2)
    ]

Problem is, in redux, I see all data but I can't take it. Also, I get an error for every reducer (all of this reducer worked before)

store.js:994 @ngrx/store: The feature name "UserProfileReducer" does not exist in the state, therefore createFeatureSelector cannot access it. Be sure it is imported in a loaded module using StoreModule.forRoot('UserProfileReducer', ...) or StoreModule.forFeature('UserProfileReducer', ...). If the default state is intended to be undefined, as is the case with router state, this development-only warning message can be ignored.

I import everything with a barrel (index.ts), in this case from fromStore. Every app have own barrel, and I check again, and every path is ok...

See on this image, all data is there, but now after StoreModule.forFeature can not take it enter image description here

EDIT:

I think the problem is here enter image description here

Before this I gett data like store.siteReducer but now I need to take it like state.app2.siteReducer

How to and where to add this app1 or app2?

Thnx

EDIT 2

I can get data directly in component on this way

 select((state: any) => state.app1.SiteReducer)
.subscribe(res => {...})

But in this way, I need to make a change in whole app components. How to make this directly in the selector? I try this 

 export const getState = createFeatureSelector<States>("app1");

export const getSite = createSelector(
  getState,
  (state: States) => state.app1.siteReducer
);

but get error

Property 'app1' does not exist on type 'States'

Here are my states

export class States { 
data: { site: SiteModel | null; error: string }; 
} 
export const InitialState = {
 data: { site: null, error: null 
} 
};

If I remove in selector model State and put any, everything is working

export const getState = createFeatureSelector<States>("app1");

    export const getSite = createSelector(
      getState,
      (state: any) => state.app1.siteReducer
    );

I also try in states model add this

export class States {
  siteReducer: {data: { site: SiteModel | null; error: string }};
}

export const InitialState = {
  siteReducer: {data: { site: null, error: null }}
};

But now in store I have nested siteReducer object (this bellow is example)

app1{
    siteReducer{  // get this parent object
        siteReducer:{
            data:{..}
  }}
}

Upvotes: 7

Views: 6162

Answers (1)

Tony
Tony

Reputation: 20092

You need to config your feature selector to get nested level state 

export const selectState = createFeatureSelector<ISomeState>(
    "app2"
);

export const selectSomeState = createSelector(
    selectState,
    state => state.someProp.someProp
);

Then config your reducer

import { ActionReducerMap } from "@ngrx/store";

export interface ISomeState {
    userState: IUserState ; // add your state interface here
}

export const reducers: ActionReducerMap<ISomeState> = {
    userState: userReducer // your reducer
};

So you will need to import the reducer into your module

 StoreModule.forFeature("app2", reducers)

If this not work please share your source code on github I will have a look

Upvotes: 2

Related Questions