I am currently working on multiple projects within a single Angular 8 app...
Previously, I had @ngrx/store implemented in only one project, but
now I have added @ngrx/store to every project. Due to having multiple stores, I now need to import StoreModule.forFeature in every project's app.module
imports: [
StoreModule.forRoot({}),
StoreModule.forFeature("project1store", fromStore.reducer1)
]
For the second project, the import looks like this
imports: [
StoreModule.forRoot({}),
StoreModule.forFeature("project2store", fromStore.reducer2)
]
The problem lies in the fact that in redux, all data is visible but not accessible. Additionally, I am encountering errors for every reducer (even though they were working fine previously)
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 am importing everything using a barrel (index.ts) from fromStore.
Each app has its own barrel, and upon rechecking, all paths are correct...
As seen in this image, all data is present, but after StoreModule.forFeature it cannot be retrieved
https://i.sstatic.net/epbjl.jpg
EDIT:
I believe the issue lies here https://i.sstatic.net/SbEYc.jpg
Previously, I accessed data like store.siteReducer but now it needs to be retrieved as state.app2.siteReducer
Where and how should I add this app1 or app2?
Thanks
EDIT 2
I can retrieve data directly in a component using this method
select((state: any) => state.app1.SiteReducer)
.subscribe(res => {...})
However, this requires changes to be made in all app components. Is there a way to implement this directly in the selector? I have attempted the following
export const getState = createFeatureSelector<States>("app1");
export const getSite = createSelector(
getState,
(state: States) => state.app1.siteReducer
);
but it results in an error
Property 'app1' does not exist on type 'States'
Below are my state definitions
export class States {
data: { site: SiteModel | null; error: string };
}
export const InitialState = {
data: { site: null, error: null
}
};
If I remove the model State from the selector and replace it with any, everything works as expected
export const getState = createFeatureSelector<States>("app1");
export const getSite = createSelector(
getState,
(state: any) => state.app1.siteReducer
);
I have also tried adding the following to the states model
export class States {
siteReducer: {data: { site: SiteModel | null; error: string }};
}
export const InitialState = {
siteReducer: {data: { site: null, error: null }}
};
However, this results in a nested siteReducer object within the store (as shown below)
app1{
siteReducer{ // get this parent object
siteReducer:{
data:{..}
}}
}