【问题标题】:After adding StoreModule.forFeature (...) can not access to stored data添加 StoreModule.forFeature(...) 后无法访问存储的数据
【发布时间】:2020-03-24 23:36:58
【问题描述】:

我在一个 Angular 8 应用程序中有多个项目... 到目前为止,我只有一个项目@ngrx/store 但是 现在我在每个项目中添加了@ngrx/store,并且由于多个商店,我需要在app.module中的每个项目中导入StoreModule.forFeature

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

在第二个项目中,我导入

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

问题是,在 redux 中,我看到了所有数据,但我无法接受。 此外,我得到每个减速器的错误(所有这个减速器之前都工作过)

store.js:994 @ngrx/store:状态中不存在功能名称“UserProfileReducer”,因此 createFeatureSelector 无法访问它。确保使用 StoreModule.forRoot('UserProfileReducer', ...) 或 StoreModule.forFeature('UserProfileReducer', ...) 将其导入加载的模块中。如果默认状态是未定义的,例如路由器状态,则可以忽略此仅用于开发的警告消息。

我使用桶 (index.ts) 导入所有内容,在本例中是从 fromStore 导入的。 每个app都有自己的桶,我再检查一遍,每条路径都ok...

看这张图,所有的数据都在了,但是现在StoreModule.forFeature之后就拿不下了

编辑:

我认为问题出在这里

在此之前,我得到像 store.siteReducer 这样的数据,但现在我需要像 state.app2.siteReducer 这样的数据

如何以及在何处添加此app1app2

谢谢

编辑 2

我可以通过这种方式直接在组件中获取数据

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

但是通过这种方式,我需要对整个应用程序组件进行更改。 如何直接在选择器中进行此操作? 我试试这个

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

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

但出现错误

“状态”类型上不存在属性“app1”

这是我的状态

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

如果我在选择器模型中删除 State 并放入 any,则一切正常

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

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

我也尝试在状态模型中添加这个

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

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

但现在我在商店中嵌套了 siteReducer 对象(下面是示例)

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

【问题讨论】:

    标签: angular typescript ecmascript-6 redux ngrx


    【解决方案1】:

    您需要配置您的功能选择器以获取嵌套级别状态

    export const selectState = createFeatureSelector<ISomeState>(
        "app2"
    );
    
    export const selectSomeState = createSelector(
        selectState,
        state => state.someProp.someProp
    );
    

    然后配置你的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
    };
    

    所以你需要将 reducer 导入到你的模块中

     StoreModule.forFeature("app2", reducers)
    

    如果这不起作用,请在github上分享您的源代码,我会看看

    【讨论】:

    • 我的状态看起来像这样...export class States { data: { user: UserProfileModel | null; error: string }; } export const InitialState = { data: { user: null, error: null } }; 并且当在selector 中,当我添加`state => state.someProp.someProp1` 我得到错误Property 'someProp' does not exist on type 'States'。如何在State 中正确添加这个
    • 请在EDIT 2 部分看看我的问题
    • 对不起,但我不能在发布前分享我的代码,而且,它太大了。相反,我把所有的例子都放在了问题中......谢谢理解
    • 你可以尝试在stackblitz.com上创建一个小的重现示例
    • 我会试试的,我会把网址链接放在这里
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-04-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-02-17
    相关资源
    最近更新 更多