# useSelect

A facade can be enhanced with `usePick`, which can proceed [NgRx's selectors](https://ngrx.io/guide/store/selectors) and transforms them into consumable Observable-streams.

This allows the facade to read data from different State-Slices that are not part of the facade itself.

### Selector

To set up useSelect a property needs to be added to the facade that is assigned with `usePick()`. In the Component, each and every selector of the project can be passed to pick. The result type of the selector is inferred automatically and provides the correct type information.

{% tabs %}
{% tab title="chunk.ts" %}

```typescript
import { useSelect, StoreFacade } from '@ngrx-ducks/core';

@StoreChunk()
export class Chunk {
  select = useSelect();
}
```

{% endtab %}

{% tab title="component.ts" %}

```typescript
import { Component, OnInit } from '@angular/core';
import { Chunk } from './chunk';
import { greetings } from './selector';

@Component({ /* ... */})
export class SomeComponent implements OnInit {
  greetings: Observable<string[]>;
  
  constructor(private chunk: Chunk) {}
  
  ngOnInit() {
    this.greetings = this.chunk.select(greetings);
  }
}
```

{% endtab %}

{% tab title="selector.ts" %}

```typescript
import { createFeatureSelector, createSelector } from '@ngrx/store';

const feature = createFeatureSelector<State>('some');

export const greetings = createSelector(
  feature,
  state => state.greetings
);
```

{% endtab %}

{% tab title="state.ts" %}

```typescript
export interface State {
  greetings: string[];
}
```

{% endtab %}
{% endtabs %}

### Selector with props

Pick also accepts selectors having properties ([selectors with props](https://ngrx.io/guide/store/selectors#using-selectors-with-props)). The `pick`-Function than expects a second parameter representing the properties (see `component.ts`).

{% tabs %}
{% tab title="chunk.ts" %}

```typescript
import { createDuck, useSelect } from '@ngrx-ducks/core';

@StoreChunk()
export class Chunk {
  select = useSelect();
}
```

{% endtab %}

{% tab title="component.ts" %}

```typescript
import { Component, OnInit } from '@angular/core';
import { Chunk } from './chunk';
import { greetingsIncluding } from './selector';

@Component({ /* ... */})
export class SomeComponent implements OnInit {
  greetings: Observable<string[]>;
  
  constructor(private chunk: Chunk) {}
  
  ngOnInit() {
    this.greetings = this.facade.select(greetingsIncluding, { term: 'good'});
  }
}
```

{% endtab %}

{% tab title="selector.ts" %}

```typescript
import { createFeatureSelector, createSelector } from '@ngrx/store';

const feature = createFeatureSelector<State>('some');

export const greetingsIncluding = createSelector(
  feature,
  (state, props: { term: string }) => state.greetings.filter(g => 
    g.includes(props.term)
  )
);
```

{% endtab %}

{% tab title="state.ts" %}

```typescript
export interface State {
  greetings: string[];
}
```

{% endtab %}
{% endtabs %}