Question

我已经使用ngrx / store 4.0.2在ngrx git repository for version 4.0.x的示例应用程序的帮助下创建了一个应用程序。我用来运行这部分应用程序的其他模块。 @ angular / cli：1.3.0 node：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)))

        )

我的reducer是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)

Answer 1

这种情况正在发生，因为选择器正试图循环未定义的东西。它主要发生在这种情况下，在API调用之前存储是空的，但是您的选择器正在尝试循环它。因为我们只在API响应时才将数据保存到存储中。

角4.0.2，ngrx / store，redurs

1 个答案: