ngrx 存储选择器返回未定义的属性答案

【问题标题】：ngrx store selector returning undefined propertyngrx 存储选择器返回未定义的属性
【发布时间】：2022-08-18 18:38:43
【问题描述】：

为了跨组件获取持久的用户信息，我试图在我的解决方案中实现 NgRx 存储，但一直坚持使用选择器从存储中获取数据。

通过控制台返回的错误是用户（AuthState 的一部分）未定义，但登录时我将其传递给商店，并且在多次扩展源时可以看到它。

我一直在关注文档https://www.npmjs.com/package/ngrx-store-localstorage，但现在有点卡住了，欢迎任何有关如何有效进行或调试的建议。

零件

this.store.dispatch(addUser({ data: userDetails }));

行动

export const addUser = createAction(
  \'[Auth] Add user\',
  props<{ data: LoggedUserDetails }>()
);

export const loadUser = createAction(
  \'[Auth] Load user\'
);

减速器

export const initialAuthState: AuthState = {
  user: {
    email: \'\',
    accessToken: \'\',
    idToken: \'\',
    name: \'\',
    id: \'\'
  },
  authenticated: false
};

// handles the retrieval of the user details
export const authReducer = createReducer(
  initialAuthState,
  on(addUser, (state, { data }) => ({
    ...state,
    user: data,
    authenticated: true
  })),
  on(loadUser, (state) => ({
    ...state,
    user: state.user,
    authenticated: state.authenticated
  }))
);

选择器

export const selectAuthState = (state: AppState) => state.authState;

export const selectUserDetails = createSelector(
  selectAuthState,
  (authState: AuthState) => authState.user);

模块

export function localStorageSyncReducer(
  reducer: ActionReducer<any>
): ActionReducer<any> {
  return localStorageSync({ keys: [\'auth\'], rehydrate: true })(reducer);
}

const metaReducers: Array<MetaReducer<any, any>> = [localStorageSyncReducer];

// within the imports rather than copying the entire module
StoreModule.forRoot(
  authReducer, { metaReducers }
)

共享组件

this.store.pipe(select(selectUserDetails)).subscribe((res: LoggedUserDetails) => {
  // accessing from a shared component this gives the user is undefined error
  this.userDetails = res;
});

所以最初你看到undefined，但是在你登录后，选择器返回数据还是继续传递undefined？
loadUser 做什么..？
不断交付 undefined 和 loadUser 旨在用于从商店中带回用户详细信息。

标签： angular ngrx ngrx-store

【解决方案1】：

选择器触发每一个状态变化。因此，我猜您的选择器会在用户状态初始化之前触发 - 当您设置用户状态时它将再次触发。

您可以使用 ?. 运算符来防止错误：

export const selectUserDetails = createSelector(
  selectAuthState,
  (authState: AuthState) => authState?.user;

此外，您在 loadUser 的减速器中的 on 将状态设置为它已经拥有的相同值，因此是多余的。

【讨论】：