我已经通过ngrx git存储库中的示例应用程序(版本4.0.x)使用​​ngrx / store 4.0.2制作了一个应用程序。 我用来运行应用程序此部分的其他模块。 @ angular / cli:1.3.0节点:v8.1.3 npm:5.3.0。 我还有其他遵循相同模式的模块,每个人都显示相同的问题。 请帮助我纠正此问题。

我调用api的作用函数是。

 @Effect() loadUsers$: Observable<Action> = this.actions$
        .ofType(ObjectActions.LOAD_USERS)
        .startWith(new ObjectActions.Loadusers())
        .switchMap(() => 
              this.service.loadUsers()
              .map((users: UserModel[]) => new ObjectActions.Loaduserssuccess(users))
              .catch(err => of(new ObjectActions.Loadusersfailure(err)))

        )

我的减速器是users.reducer.ts

export interface UserState {
    user_ids: string[]
    users: {[id: string]: Array<UserModel>}
    selectedUserId: string| null;
}

const initialState: UserState = {
    user_ids: [],
    users: {},
    selectedUserId: null
}

export function UsersReducer(state = initialState, action: UserActions.Actions): UserState {
    switch(action.type){
        case UserActions.LOAD_USERS_SUCCESS:
            return {
                          user_ids: action.payload.user_ids,
                          users: action.payload.users,
                          selectedUserId: null
                      }

        case UserActions.LOAD_USERS_FAILURE:

        case UserActions.ADD_USER_SUCCESS:
            return {
                            user_ids: [ ...state.user_ids, action.payload.user_id],
                            users: Object.assign({}, state.users, { [action.payload.user_id]: action.payload}),
                            selectedUserId: state.selectedUserId
                        };
        case UserActions.ADD_USER_FAILURE:

        case UserActions.GET_USER_SUCCESS:

        case UserActions.SELECT_USER_SUCCESS:
                      return {
                        user_ids: state.user_ids,
                        users: state.users,
                        selectedUserId: action.payload,
                          }
        case UserActions.DELETE_USER_SUCCESS:          
    enter code here
        default:
            return state
    }
}


export const getUsersId= (state: UserState) => state.user_ids

export const getUsers = (state: UserState) => state.users


export const getAllUsers = createSelector(getUsers, getUsersId, (users, user_ids) => {
    return user_ids.map(user_id => users[user_id]) || new Map();
});



export const selectedUserId = (state: UserState) => state.selectedUserId;


export const getSelectedUser = createSelector(getUsers, selectedUserId, (entities, selectedId) => {
  return entities[selectedId];
});

export interface AppState {
  users: fromUser.UserState;
  loggedinuser: fromLogin.LoginState;
}
export const reducer: ActionReducerMap<AppState>  = {
    users: fromUser.UsersReducer,
  loggedinuser: fromLogin.LoginReducer,
};

export const getUserAppState =  createFeatureSelector<AppState>('users'); 
export const getUserState = createSelector(
  getUserAppState,
  (state: AppState) => state.users
);

export const getUsers = createSelector(getUserState, fromUser.getAllUsers)

从商店中选择getUsers时,出现此错误

UsersComponent.html:50 ERROR TypeError: Cannot read property 'map' of undefined
    at users.reducer.ts:74
    at index.js:76
    at index.js:36
    at index.js:90
    at index.js:36
    at store.es5.js:698
    at memoized (store.es5.js:666)
    at store.es5.js:702
    at MapSubscriber.memoized [as project] (store.es5.js:666)
    at MapSubscriber.webpackJsonp.../../../../rxjs/operator/map.js.MapSubscriber._next (map.js:77)

#1楼 票数:1 已采纳

之所以发生这种情况是因为选择器试图循环未定义的内容。 在这种情况下,通常会发生这种情况,即在调用API之前存储为空,但您的选择器正在尝试遍历该存储。 因为我们保存数据以便仅在API响应时进行存储。

  ask by GraphicalDot translate from so

未解决问题?本站智能推荐:

1回复

使用 ngrx 存储时如何在 Angular 2 中导航

我将 ngrx store (4.x) 与 Angular 4 一起使用。我使用效果在后端进行 CRUD 操作,就像下面的示例在后端 API 上添加了一个任务。 效果: 任务编辑组件: 问题:在我的组件中,我需要导航到不同的页面,现在我很难把这个逻辑放在哪里? 特别是当我考虑以下场景时,
1回复

@ ngrx /存储预加载防护捕获错误

我正在使用@ ngrx / store在Angular Guard上进行检查,以检查状态是否已加载,并且遇到一个问题,即如果我使用过滤器, canActivate方法将永远不会返回。 这是GetCompanies操作的示例效果: 如果出现错误,我将调度GetCompaniesFai
2回复

NGRX 效果中的访问状态

如何在效果中访问我的状态? 我当前的效果实现(如下所示)在调度SEARCH_REUQUEST操作时触发。 但是,在调用我的搜索服务以启动 HTTP 请求之前,我想访问一个状态以获取一些搜索参数。 @Effect() SearchRequest$ = this.actions$ .ofType(f
1回复

如何使Ngrx-store与canLoad Guard一起使用

我不知道这是否是个好习惯。 但是下面是我想做的事情: 我有2个延迟加载的模块: ManagementModule和ConfigurationModule ,路由配置如下: 基本上,该想法是检查系统状态并重定向到不同的阶段,例如。 如果尚未配置sys,则重定向到/configur
3回复

如何在从商店选择之前等待发货完成。 Ngrx 相关问题

在我从商店中选择之前,我如何等待发货完成。 在谷歌搜索中没有任何运气? 在这种情况下,如何在从商店选择之前先等待派送完成? 我的代码,感谢支持的帮助。 目前在第一次加载期间,调度操作尚未完成,当我从商店中选择项目时。 它目前是空的。
3回复

@ ngrx / store createSelector()是否真的必要?

我真的很喜欢this.store.select('media', 'games');的简洁API this.store.select('media', 'games'); 我不需要使用createSelector()创建任何选择器,也不需要导入任何东西。 当项目变大时,我觉得选择器变成了
1回复

Angular 4 NGRX /效果测试

我在弄清楚应该在使用ngrx / store等的Angular 4应用程序中测试效果的方式时遇到问题。对于Angular2,有EffectsRunner和EffectsTestingModule,但是它们在角度4的ngrx / store版本中不存在。 m寻找一种方法来测试效果以及带有商店的整个应用
2回复

如果使用 ngrx/store 和效果,服务有什么用?

我正在尝试将 NGRX 添加到我的 Angular 项目中,但我不知道我是否仍然需要服务,因为组件可以调度操作。 这是否意味着我不必使用除 ngrx/store 之外的任何服务?