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

// 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
    };
  }
);