RxJs/Redux/Angular - Dynamic sort functions from multiple observable streams

I have an angular application that is using NGRX as a state store for data coming from an API.

The primary data in the application is a collection of inventory items. Each item has properties that are keyed to child collections. (ie. manufacturerId is keyed to a collections of manufacturers, etc.) I am using ngrx-entity in order to be able to index the collections.

I want to display this data in a grid on the screen in a denormalized fashion (display manufacturer name instead of id), and then allow them to sort by any of these columns.

The trick here is, that I need to sort by data that is in a child collection, and that child collection is an observable stream itself. The only "subscribe" in this whole process is in the HTML markup with an "async" pipe - and I plan to keep it that way.

I want to be able to apply the sort field and the sort direction dynamically, but I am not quite sure how to do it efficiently. I have created this stackblitz example of how I have it working now. However, the example only shows 2 child fields, and I have another half dozen fields to sort by. The code could get rather messy.

Plus at some point, I will be adding some kind of filtering to this as well.

I've considered modifying the API to return the data denormalized, but that seems like a less than ideal approach, as there are data integrity issues.

Here's the code for the stackblitz as it stands now. I'm looking for some feedback to make this better.

import { of, BehaviorSubject, timer } from 'rxjs'; 
import { map, combineLatest, switchMap } from 'rxjs/operators';

const manufacturers = {
  1: { id: 1, name: 'Acme' },
  2: { id: 2, name: 'Swift' },
  3: { id: 3, name: 'Baker' }
};

const styles = {
  21: { id: 21, code: 'Bridgeport' },
  22: { id: 22, code: 'Summit' },
  23: { id: 23, code: 'Anderson' },
  24: { id: 24, code: 'Saturn' }
};

const couplerTypes = {
  1: { id: 1, name: 'Barringer' },
  2: { id: 2, name: 'Waldorf' }
};

const inventory = [
  { id: 123, manufacturerId: 1, styleId: 21, couplerTypeId: 1},
  { id: 124, manufacturerId: 2, styleId: 21, couplerTypeId: 1},
  { id: 125, manufacturerId: 1, styleId: 23, couplerTypeId: 2},
  { id: 126, manufacturerId: 3, styleId: 24, couplerTypeId: 2},
  { id: 127, manufacturerId: 3, styleId: 22, couplerTypeId: 1},
  { id: 128, manufacturerId: 1, styleId: 22, couplerTypeId: 2},
  { id: 129, manufacturerId: 3, styleId: 24, couplerTypeId: 2},
  { id: 130, manufacturerId: 2, styleId: 21, couplerTypeId: 1},
  { id: 131, manufacturerId: 2, styleId: 21, couplerTypeId: 1},
  { id: 132, manufacturerId: 1, styleId: 24, couplerTypeId: 2},
]

// Assume these four collections are coming from an NGRX store
const manufacturers$ = of(manufacturers);
const styles$ = of(styles);
const couplerTypes$ = of(couplerTypes);
const inventory$ = of(inventory);

// Sort functions
const sortAscending = (one, two) => (one > two ? -1 : 1);
const sortDescending = (one, two) => (one > two ? 1 : -1);

// Start with sort descending
const sortDirection$ = new BehaviorSubject<any>(sortDescending);

// An observable of a function that sorts by manufacturer name combined with the sort direction
const manufacturersSort$ = manufacturers$.pipe(
  combineLatest(sortDirection$),
  map(([manufacturers, sortDirection]) => {
    return (one, two) => sortDirection(
      manufacturers[one.manufacturerId].name,
      manufacturers[two.manufacturerId].name);
  }));

// An observable of a function that sorts by style code combined with the sort direction
const stylesSort$ = styles$.pipe(
  combineLatest(sortDirection$),
  map(([styles, sortDirection]) => {
    return (one, two) => sortDirection(
      styles[one.styleId].code,
      styles[two.styleId].code);
  }));

// A stream of a stream of sort functions
const sortFunction$ = new BehaviorSubject<any>(manufacturersSort$);

// The combination of the inventory and the sort function
const sortedItems$ = sortFunction$.pipe(
  switchMap(innersort$ => innersort$.pipe(
    combineLatest(inventory$),
    switchMap(([innersort, items]) => {
      return of(items.sort(innersort));
    }),
  ))
)

// SHow me the output
timer(1000).subscribe(() => {
  sortDirection$.next(sortAscending);
  timer(1000).subscribe(() => {
    sortFunction$.next(stylesSort$);
    timer(1000).subscribe(() => {
      sortDirection$.next(sortDescending);
    });
  });
});

sortedItems$.subscribe(items => {
  items.map(item =>console.log(`id: ${item.id}, manufacturerId: ${item.manufacturerId}, styleId: ${item.styleId}, couplerTypeId: ${item.couplerTypeId}`));
  console.log('--------------------');
});