NGXS - Пользовательский выбор ()

Question

Я пытаюсь создать пользовательский @Select (), чтобы иметь возможность развернуть конкретное дерево и динамически возвращать значения. Получение либо неопределенного, либо это не происходит (выполняется)

user.component.ts

const location = 'new york'
@Select(state => UserState.getUserLocationSlots(state, location)) slots$;

user.state.ts

@Selector() 
static getUserLocationSlots(state: UserStateModel, location: any) {
  console.log(state);
  console.log(location); // <-- expecting 'new york', but getting undefined
}

Answer 1

Я не думаю, что можно передать параметр @Selector() оформленные функции в ngxs v2. Было бы хорошо, хотя.

Билет существует для этого запроса функции.

Кроме того, я думаю, что вы не используете @Selector() правильно. Я должен быть что-то вроде (следовательно, не может передавать параметры):

@Select(UserState.getUserLocationSlots) slots$

Обратитесь к документации.

Примечание: я не эксперт по ngxs... это просто основано на том, что я понимаю сейчас.

Answer 2

Вы можете достичь этого с помощью crateSelector функция от @ngxs/store

В вашем файле.state.ts:

static getLocationSlots(location: string) {
    return createSelector([UserState], (state: string[) => {
        // logic for filtering your data
        // eg.: state.filter(element => element == location)
    })
}

In your .component.ts file:

@Select(UserState.getLocationSlots('new york')) slots$: Observable<any>

Вы также можете проверить здесь для более подробной информации

Answer 3

Для передачи параметров вы можете сделать так, чтобы select возвращал функцию, это не элегантно, но работает.

Например, оператор select будет выглядеть так:

  @Selector()
  static getItemByIdFn(state: { [id: number]: Entity }) {
    return (id: number) => {
      return state[id];
    };
  }

затем в компоненте:

this.store.select(MyState.getItemByIdFn)
  .pipe(map(mapByIdFn) => mayByIdFn(1)) // using the returned function
  .subscribe(...);

Обратите внимание на карту, где вы передаете свой идентификатор возвращаемой функции. Здесь вы можете разместить любые параметры, которые вы хотите.

Надеюсь это поможет:)!

Answer 4

Это достижимо в NGXS v2 и v3. Скопировано из моего комментария в обсуждении динамических селекторов здесь

Мы можем достичь этого в настоящее время, используя шаблон, часто используемый для селекторов с избыточностью...

@Selector Декоратор можно записать так, чтобы он возвращал функцию с нужным параметром. Это включает желаемые аргументы динамического селектора, а также позднее разрешение выбранного состояния. Например:

@State<UserStateModel>( ... ) 
export class UserState {   
  @Selector()  
  getFilteredUsersFn(userStateModel: UserStateModel) {
    return (filter: string) => 
      userStateModel.users.filter((user) => user.indexOf(filter) >= 0);
  }
} 

И тогда компонент будет содержать:

@Component({...}) 
export class AppComponent {  
  @Select(UserState.getFilteredUsersFn) 
  filteredUsersFn$: Observable<(filter: string) => User[]>;

  get currentFilteredUsers$() {
    return this.filteredUsersFn$
      .pipe(map(filterFn => filterFn('myFilter')));   
  } 
}