Búsqueda de sitios web

angular - Después de agregar StoreModule.forFeature (...) no se puede acceder a los datos almacenados

Tengo múltiples proyectos en una aplicación Angular 8... Hasta ahora, solo tenía en un proyecto @ngrx/store, pero ahora he añadido @ngrx/store en cada proyecto y debido a múltiples stores, necesito en cada proyecto en app.module importar StoreModule.forFeature

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

en el segundo proyecto, importo

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

El problema es que, en redux, veo todos los datos pero no puedo tomarlos. Además, recibo un error en cada reductor (todos estos reductores funcionaban antes)

store.js:994 @ngrx/store: El nombre de la funcionalidad "UserProfileReducer" no existe en el estado, por lo tanto createFeatureSelector no puede acceder a él. Asegúrese de que esté importado en un módulo cargado usando StoreModule.forRoot('UserProfileReducer', ...) o StoreModule.forFeature('UserProfileReducer', ...). Si se pretende que el estado por defecto sea indefinido, como en el caso del estado del enrutador, este mensaje de advertencia solo para desarrollo puede ser ignorado.

Importo todo con un barril (index.ts), en este caso desde fromStore. Cada aplicación tiene su propio barril, y reviso de nuevo, y todos los caminos están correctos...

Mira en esta imagen, todos los datos están allí, pero ahora después de StoreModule.forFeature no se pueden obtener

EDITAR:

Creo que el problema está aquí

Antes obtenía datos como store.siteReducer pero ahora necesito tomarlos como state.app2.siteReducer

¿Cómo y dónde agregar este app1 o app2?

Gracias

EDICIÓN 2

Puedo obtener datos directamente en el componente de esta manera

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

Pero de esta manera, necesito hacer un cambio en todos los componentes de la aplicación. ¿Cómo hacer esto directamente en el selector? Yo intento esto

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

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

pero obtener error

La propiedad 'app1' no existe en el tipo 'States'

Aquí están mis estados

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

Si elimino en el selector del modelo State y pongo any, todo funciona

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

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

También intento agregar esto en el modelo de estados

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

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

Pero ahora en la tienda tengo un objeto siteReducer anidado (lo siguiente es un ejemplo)

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

Respuesta #1

Necesitas configurar tu selector de funciones para obtener el estado del nivel anidado

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

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

Entonces configura tu reductor

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

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

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

Entonces necesitarás importar el reductor en tu módulo

 StoreModule.forFeature("app2", reducers)

Si esto no funciona, por favor comparte tu código fuente en GitHub, lo revisaré.

Artículos relacionados