title: Check data in Angular Store before calling API with NGRX using observables
body: <p>I am using Angular with NGRX effects and I am new to the world of observables. I want to check that if data exists in my store, then the API should not be called, and data should be pulled from the store. I managed to find that I can use withLatestFrom() which can check the latest value in the store. The next part is confusing me and I cant get it to work. My current code is below:</p>
  
  <pre><code> @Effect() getSomeContent$ = this.actions$
      .ofType(GET_SOME_CONTENT)
      .withLatestFrom(this.store$.select('store-section'))
      .map(([action, store]) =&gt; {
          const content = {};
          if (store.someContent.length &gt; 0) {
             return new GetCategoryContentSuccessAction({ categoryContent: categories });
          }
          return Observable.from(action.payload);
      })
      .switchMap(payload =&gt; this.APIcall(payload)
          .then(data =&gt; {
              const content = {};
              data.items.map((item) =&gt; {
                  const slug = data.slug;
                  content[slug] = {
                      info: datasomeData
                  };
              });
              return new GetSomeContentSuccessAction({ categoryContent: categories });
          })
          .catch((err) =&gt; {
              return new GetFailureAction({ error: {} });
          })
      );
  </code></pre>
  
  <p>I want to use some kind of if or else statement to check the store. If data exists i want to send an empty object back for the reducer I have to handle. If it doesn't I want to call the API and send that data back. I don't know if the observable can be branched in other words so this can be done?</p>
  
  <p>Is there a better way that this could have been achieved? Possibly by creating another action to deal with the API separately. I would like to learn what the best practice is going forward. Any help would be greatly appreciated.  </p>