title: How do I create a NGRX selector that combines data from two different feature modules?
body: <p>I want to do this:</p>
  <pre class="lang-js prettyprint-override"><code>export const selectPlacesForCurrentCustomer = createSelector(
     selectAllPlaces,
     selectedCustomerId,
     (places: Place, customer_id: string) =&gt; places.filter((place) =&gt; place.customer === customer_id)
  ) 
  </code></pre>
  <p>However when I do this, I get this error:</p>
  <blockquote>
  <p>Argument of type 'MemoizedSelector&lt;State, string,
  DefaultProjectorFn&gt;' is not assignable to parameter of type
  'Selector&lt;State, string&gt;'.</p>
  </blockquote>
  <p>Here is a simplified version of my application that reproduces the issue.
  <a href="https://stackblitz.com/edit/angular-10-ngrx-issue?file=src/app/reducers/index.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-10-ngrx-issue?file=src/app/reducers/index.ts</a></p>
  <p>Here's a screenshot of my state. I want to combine these two things:
  <a href="https://i.stack.imgur.com/fKiLn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fKiLn.png" alt="enter image description here" /></a></p>
  <p>**************** Background ******************</p>
  <p>I have two separate feature stores. Each store uses <a href="https://ngrx.io/guide/entity" rel="nofollow noreferrer">NGRX/Entity</a>.</p>
  <ol>
  <li>Places</li>
  <li>Customer</li>
  </ol>
  <p>I would like to create a selector that pulls data from both. Here's a simplified interface for both models:</p>
  <pre class="lang-js prettyprint-override"><code>export interface Place {
  _id: string;
  customer: string;
  ...
  }
  
  export interface Customer {
  _id: string;
  }
  </code></pre>
  <p>Customer Module</p>
  <p>The Customer Feature has multiple stores. I import this feature into my customer module like so:</p>
  <pre><code> StoreModule.forFeature(fromCustomer.customersFeatureKey, fromCustomer.reducers)
  </code></pre>
  <p>The customer feature state looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>
  export interface CustomerState {
      [fromCustomers.customerFeatureKey]: fromCustomers.State; //I'm want pull data from here!!
      [fromPaymentMethods.paymentmethodFeatureKey]: fromPaymentMethods.State;
      [fromInvoices.invoiceFeatureKey]: fromInvoices.State;
      [fromSubscriptions.subscriptionFeatureKey]: fromSubscriptions.State;
  }
  
  // This is what I pass to the `forFeature` method in my customer module. 
  export function reducers(state: CustomerState | undefined, action: Action) {
    return combineReducers({
      [fromCustomers.customerFeatureKey]: fromCustomers.reducer,
      [fromPaymentMethods.paymentmethodFeatureKey]: fromPaymentMethods.reducer,
      [fromInvoices.invoiceFeatureKey]: fromInvoices.reducer,
      [fromSubscriptions.subscriptionFeatureKey]: fromSubscriptions.reducer
    })(state, action);
  }
  
  </code></pre>
  <p>If we examine the <code>fromCustomers.State</code> state, this is what that looks like:</p>
  <pre class="lang-js prettyprint-override"><code>export interface State extends EntityState&lt;Customer&gt; {
    selectedCustomerId: string | null; // --&gt; This is the first piece of data I'm trying to select.
    loaded: boolean;
    loading: boolean;
    processing: boolean;
  }
   
  export const adapter: EntityAdapter&lt;Customer&gt; = createEntityAdapter&lt;Customer&gt;({
      selectId: customer =&gt; customer._id,
      sortComparer: false
  });
   
  export const initialState: State = adapter.getInitialState({
      selectedCustomerId: null,
      loaded: false,
      loading: false,
      processing: false
  });
  
  ...
  </code></pre>
  <p>As we can see above, this were I finally setup the EntityAdapter. <strong>The important piece of data that I'm trying to select from this feature is:</strong> <code>selectedCustomerId</code>.</p>
  <p>I have a selector in this feature that looks like this:</p>
  <pre class="lang-js prettyprint-override"><code>export const selectedCustomerId = createSelector(
      selectCustomersEntitiesState,
      (state) =&gt; state.selectedCustomerId
  )
  </code></pre>
  <p>Place Module</p>
  <p>Now that we have customer module summarized, let's move on to the <strong>Place Feature.</strong></p>
  <p>Similar to the customer module, I'm importing this into the place module file.</p>
  <p>This is what my Place State looks like:</p>
  <pre class="lang-js prettyprint-override"><code>export interface PlaceState {
      [fromPlaces.placeFeatureKey]: fromPlaces.State;
      //[fromSearch.searchFeatureKey]: fromSearch.State; // This is where you should add search for assignments
  }
  
  export interface State extends fromRoot.State {
    [placesFeatureKey]: PlaceState;
  }
  
  // This is what I pass to the `forFeature` method in my place module. 
  export function reducers(state: PlaceState | undefined, action: Action) {
    return combineReducers({
      [fromPlaces.placeFeatureKey]: fromPlaces.reducer,
    })(state, action);
  }
  </code></pre>
  <p>If we dive down into the <code>[fromPlaces.placeFeatureKey]</code> you'll see where I'm setting up the EntityAdapter for the place model.</p>
  <pre class="lang-js prettyprint-override"><code>export interface State extends EntityState&lt;Place&gt; {
    selectedPlaceId: string | null;
    loaded: boolean;
    loading: boolean;
    processing: boolean;
  }
   
  export const adapter: EntityAdapter&lt;Place&gt; = createEntityAdapter&lt;Place&gt;({
      selectId: place =&gt; place._id,
      sortComparer: false
  });
   
  export const initialState: State = adapter.getInitialState({
      selectedPlaceId: null,
      loaded: false,
      loading: false,
      processing: false
  });
  </code></pre>
  <p>I have a selector for all places:</p>
  <pre class="lang-js prettyprint-override"><code>export const {
    selectIds: selectPlaceIds,
    selectEntities: selectPlaceEntities,
    selectAll: selectAllPlaces, // --&gt; This second thing I'm trying to select. 
    selectTotal: selectTotalPlaces,
  } = fromPlaces.adapter.getSelectors(selectPlacesEntitiesState);
  </code></pre>
  <p>The selector from place feature that I'm interested in is <code>selectAllPlaces</code>.</p>
  <p>I hope you're still with me. **Now that I've set up the background, I would like to explain what I what hope to do, but can't figure out how.</p>
  <p>********** <em>I want to do this:</em> **********</p>
  <pre class="lang-js prettyprint-override"><code>export const selectPlacesForCurrentCustomer = createSelector(
     selectAllPlaces,
     selectedCustomerId,
     (places: Place, customer_id: string) =&gt; places.filter((place) =&gt; place.customer === customer_id)
  ) 
  </code></pre>
  <p>However when I do this, I get this error:</p>
  <blockquote>
  <p>Argument of type 'MemoizedSelector&lt;State, string,
  DefaultProjectorFn&gt;' is not assignable to parameter of type
  'Selector&lt;State, string&gt;'.</p>
  </blockquote>