当前位置：首页 > article >正文

ngrx store中createSelector的用法？

article 2025/1/21 12:01:27

在ngrx的store中，createSelector用于从状态树中选择和派生数据。它允许创建高效的选择器，在状态变化时，仅当相关数据发生变化时才重新计算。这能有效避免不必要的渲染，提高性能。下面是createSelector的基本用法示例：

定义状态接口
首先，定义应用的状态结构：

interface AppState {
  users: UserState;
}

interface UserState {
  allUsers: User[];
  selectedUserId: number | null;
}

定义初始状态和Reducers
创建userReducer来管理UserState的状态：

const initialState: UserState = {
  allUsers: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }],
  selectedUserId: null,
};

function userReducer(state = initialState, action): UserState {
  // 根据action处理状态更新逻辑
  return state;
}

使用createSelector创建选择器
选择器用于从状态树中提取数据。假设你想要从AppState中获取allUsers和selectedUserId的派生状态。

import { createSelector } from '@ngrx/store';

// 基础选择器：获取 UserState
const selectUserState = (state: AppState) => state.users;

// 选择器1：获取所有用户
const selectAllUsers = createSelector(
  selectUserState,
  (userState) => userState.allUsers
);

// 选择器2：获取选中的用户ID
const selectSelectedUserId = createSelector(
  selectUserState,
  (userState) => userState.selectedUserId
);

// 派生选择器：根据 selectedUserId 获取选中的用户信息
const selectSelectedUser = createSelector(
  selectAllUsers,
  selectSelectedUserId,
  (allUsers, selectedUserId) => allUsers.find(user => user.id === selectedUserId)
);

在组件中使用选择器
在组件中通过Store来调用这些选择器，并订阅选中的数据：

import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';

@Component({
  // ...
})
export class UserComponent {
  allUsers$: Observable<User[]>;
  selectedUser$: Observable<User | undefined>;

  constructor(private store: Store<AppState>) {
    this.allUsers$ = this.store.pipe(select(selectAllUsers));
    this.selectedUser$ = this.store.pipe(select(selectSelectedUser));
  }
}