Angular ngrx:访问存储的相邻切片_Angular NgRX:如果存储切片为空，则转到数据库_如何访问控制台中的ngrx存储？ - 腾讯云开发者社区

Angular ngrx:访问存储的相邻切片

基础概念

Angular 是一个用于构建单页客户端应用的开源框架，而 NgRx 是基于 Redux 架构的状态管理库，专为 Angular 应用设计。NgRx 通过一系列操作（actions）、缩减器（reducers）、效果（effects）和选择器（selectors）来管理和维护应用的状态。

类型

Actions：描述发生了什么。
Reducers：处理 actions 并更新状态。
Selectors：从状态中提取数据。
Effects：处理副作用。

应用场景

NgRx 适用于大型复杂的前端应用，特别是那些需要严格管理状态的应用，如电子商务网站、社交媒体平台等。

访问存储的相邻切片

在 NgRx 中，如果你想访问存储（store）中的相邻切片，你可以使用选择器（selectors）。选择器允许你从 store 中提取特定的数据片段，并且可以组合多个选择器来创建更复杂的数据结构。

示例代码

假设我们有一个存储，其中包含一个用户列表，我们想要访问当前选中用户的相邻用户。

// actions.ts
export const SELECT_USER = 'SELECT_USER';
export const UPDATE_USER_LIST = 'UPDATE_USER_LIST';

export const selectUser = (userId: string) => ({
  type: SELECT_USER,
  payload: userId
});

export const updateUserList = (users: User[]) => ({
  type: UPDATE_USER_LIST,
  payload: users
});

// reducers.ts
import { createReducer, on } from '@ngrx/store';
import { SELECT_USER, UPDATE_USER_LIST } from './actions';

export interface User {
  id: string;
  name: string;
}

export interface State {
  users: User[];
  selectedUserId: string | null;
}

export const initialState: State = {
  users: [],
  selectedUserId: null
};

const _userReducer = createReducer(
  initialState,
  on(UPDATE_USER_LIST, (state, { payload }) => ({
    ...state,
    users: payload
  })),
  on(SELECT_USER, (state, { payload }) => ({
    ...state,
    selectedUserId: payload
  }))
);

export function userReducer(state, action) {
  return _userReducer(state, action);
}

// selectors.ts
import { createSelector } from '@ngrx/store';
import { State } from './reducers';
import { User } from './actions';

export const selectUsers = (state: State) => state.users;
export const selectSelectedUserId = (state: State) => state.selectedUserId;

export const selectSelectedUser = createSelector(
  selectUsers,
  selectSelectedUserId,
  (users, selectedUserId) => users.find(user => user.id === selectedUserId)
);

export const selectAdjacentUsers = createSelector(
  selectSelectedUser,
  selectUsers,
  (selectedUser, users) => {
    const index = users.findIndex(user => user.id === selectedUser.id);
    return {
      prevUser: users[index - 1],
      nextUser: users[index + 1]
    };
  }
);

遇到的问题及解决方法

问题：访问相邻切片时出现数组越界错误

原因：当当前选中的用户是列表中的第一个或最后一个时，尝试访问前一个或后一个用户会导致数组越界。

解决方法：在选择器中添加边界检查。

export const selectAdjacentUsers = createSelector(
  selectSelectedUser,
  selectUsers,
  (selectedUser, users) => {
    const index = users.findIndex(user => user.id === selectedUser.id);
    const prevUser = index > 0 ? users[index - 1] : null;
    const nextUser = index < users.length - 1 ? users[index + 1] : null;
    return {
      prevUser,
      nextUser
    };
  }
);