title: @ngrx return one object from array with .single
body: <p>I want to return an Observable of one object, selected from an array of objects from my store. I would like to use the .single operator, because this would throw an exception if there are less or more than 1 objects present. I can't get it to work though, because my store is returning an array instead of an observable. I know I could use .filter on the array, but I would like to understand why I can't get it to work. I even tried using a selector.</p>
  
  <p>My App reducer has:</p>
  
  <pre><code>export interface AppState {
    batStores: fromBatStores.State;
  }
  
  export const reducers: ActionReducerMap&lt;AppState&gt; = {
    batStores: fromBatStores.batStoresReducer,
  };
  </code></pre>
  
  <p>The reducer of my module:</p>
  
  <pre><code>export interface State {
    batStores: BatStore[];
  }
  
  const initialState = {
    batStores: [
      new BatStore(0, 0, true, 'Cell 11', 11, 11),
      new BatStore(1, 0, false, 'Cel 12', 12, 11),
      new BatStore(2, 0, true, 'Cel 13', 13, 11),
      new BatStore(2, 0, true, 'Cel 14', 14, 11),
    ]
  };
  
  export const selectBatStores = (state: fromApp.AppState) =&gt; state.batStores;
  export const selectBatStoresBatStores = createSelector(selectBatStores, (state: State) =&gt; state.batStores);
  </code></pre>
  
  <p>Now I try something like this in my ngOnInit:</p>
  
  <pre><code>ngOnInit() {
    const editId = 11;
    const batStore$: Observable&lt;BatStore&gt; = this.store.select(fromBatStores.selectBatStoresBatStores)
      .single(bs =&gt; bs.number === editId);
  
    this.batStore$ = batStore$;
  }
  </code></pre>
  
  <p>PhpStorm says the number property doesn't exist on BatStore[]. Which I don't understand, because at the <a href="https://www.learnrxjs.io/operators/filtering/single.html" rel="nofollow noreferrer">example documentation</a> single is also used as an operator on observable array.</p>
  
  <h2>Update</h2>
  
  <p>After reading the answers, still very confused. To test, I wrote my function like this:</p>
  
  <pre><code>getBatStore(id: number) {
    const versionA$ = this.store.select(fromBatStores.selectBatStoresBatStores)
      .switchMap((batStores: BatStore[]) =&gt; Observable.from(batStores))
      .filter((bs: BatStore) =&gt; {
        console.log('Analyzing ', bs);
        console.log('Result ', bs.number === id);
        return bs.number === id;
      });
  
    const versionB$ = this.store.select(fromBatStores.selectBatStoresBatStores)
      .switchMap((batStores: BatStore[]) =&gt; Observable.from(batStores))
      .single((bs: BatStore) =&gt; {
        console.log('Analyzing ', bs);
        console.log('Result ', bs.number === id);
        return bs.number === id;
      });
  
    console.log('VersionA: ', versionA$);
    console.log('VersionB: ', versionB$);
  
    console.log('Same? ', versionA$ === versionB$);
  
    return versionB$;
  }
  </code></pre>
  
  <p>Both versions output the same thing to the console. VersionA works when using with async pipe in my view, VersionB doesn't. The code compiles and PhpStorm doesn't complain. </p>