My approach on managing state and API's for front-end apps

const data = useQuery('/api/invoices')

const [page, setPage] = useState(0)
const [filter, setFilter] = useState<FilterQuery>({})

const filtered = // imaginable filtering code

const paginated = // imaginable pagination code

// And render it
return paginated.map(invoice => <div>Invoice</div>)

async function updateInvoiceTax(id: number, tax: number): Promise<void> {
  // I also like rxjs to wrap API calls
  return lastValueFrom(
    fromFetch(`/api/invoice/${id}`, {
      method: 'POST',
      body: JSON.stringify({ tax })
    }).pipe(
      // A wrapper that checks if the request was successful, and then retries if necesssary
      handleApiError(),
      // Get the updated record
      switchMap(() => fromFetch(`/api/invoice/${id}`)),
      switchMap(response => response.json()),
      switchMap(async invoice => {
        // Update data in dexie
        // That would intern trigger data observable – you'll see in later examples
        database?.invoices.update(id, invoice)
      }),
      // Eventually return nothing, just to the types match
      map(() => null)
    )
  )
}

[
  { "id": 1, "hash": "d429", invoice_number: "AC-343", //... },
  { "id": 2, "hash": "a321", invoice_number: "AC-343", //... },
  /// et cetera
]

// Hash is just a first four of the sha256(record)
hash := sha256(record)[:4]

// Types
type Query = {
    amountMin?: number
    amountMax?: number
    dueDateMin?: Date
    dueDateMax?: date
    searchTerm?: string
}

// local query streams
export const query$ = new Subject<Query>()

export const partialQuery$ = new Subject<Query>()

export const page$ = new Subejct<number>()

// You can also orderBy$ and pretty much anything else.

// Effects

// This little snippet takes the latest object in query$ and overrides it with the fields from partialQuery$
// So if want to reset the filter, I'd write to query$, but if I want to change just one field I'd write to partialQuery$
partialQuery$
    .pipe(
        withLatestFrom(query$),
        map(([partialQuery, currentQuery]) => ({
            ...currentQuery, 
            ...partialQuery 
        })),
    )
    .subscribe(query => {
        query$.next(query)
    })

// Data streams

// There are a few things to unpack
// 
// I am subscribing to changes on invoices table
// 
// I also noticed that if you write to dexie, dexie would emit an event. Even if the actual data did not change
//
// For example, if you update a record, but the data is the same
// database?.invoices.update(id, data)
//
// dexie would still emit a change event, basically forcing the UI to re-render unnecessarily
//
// Therefore I pipe it to distinctUntilChanged(isEqual)
//
// isEqual could be any function that deep compares two objects and returns boolean on whether it changed or not
//
// I'm using react-fast-compare
export const data$ = from(
    liveQuery(() => database?.invoices.toArray() ?? [])
).pipe(distinctUntilChanged(isEqual))

// Now, when I have the collection of items, I can apply filters, pagination, etc.

// For example
// 
// I have a helper function that takes latest data$, latest query$ and an array of callbacks to help me filter each record individually
// 
// createFilterStream does batching and debouncing internally, so I can shovel a large array of 100k records and my UI would still be fine
// 
// Look at rxjs asapScheduler, from operator, and batch
//
// You can tell rxjs to process the large collection at smaller chunks only when browser is not busy
const withQuery$ = createFilterStream(data$, query$, [
  // Filters 
  (item, query): bool => {
      // If filter is not set, then return an item
      if (!query.amountMin) {
        return true
      }

      return query?.amountMin >= item.amount
  },

  (item, query): bool => {
      if (!query.amountMax) {
        return true
      }

      return query?.amountMax <= item.amount
  },

  (item, query): bool => {
    if (!query.searchTerm || query.searchTerm === '') {
      return true
    }

    // You can implement all sorts of searching, including fuzzy matching

    return invoice.invoice_number.toLowerCase().includes(
      query.searchTerm.toLowerCase()
    )
  }

  // et cetera
])

// Apply pagination
const perPage = 10
const withPagination$ = combineLatest([withQuery$, page$]).pipe(
  map(([collection, page]) => {
    return colleciton.slice(page * perPage, perPage)
  })
)

// You can have even more derivaties

// I prefer to re-export it as collection$, so I always have the same API
export const collection$ = withPagination$

// And because you have all of the data locally, you can calculate on aggregations
export const averageAmount$ = $data.pipe(
  map(collection => {
    if (collection.length === 0) {
      return 0
    }

    const sum = collection.map(e => e.amount)
    return sum / collection.length
  })
)

const Component: React.FC = () => {
    const collection = useObservable(invoices.collection$, [])
    const average = useObservable(invoices.averageAmount$)

    // Set an empty query and first page
    useEffect(() => {
        invoices.query$.next({})
        invoices.page$.next(0)
    }, [])

    return <>
        <Filters 
            query={query} 
            onQueryChange={nextQuery => {
                invoices.partialQuery$.next({})
            }}
        />

        <Kpi average={average} />

        <Table collection={collection} />
    </>
}

// API control streams
export const load$ = new Subject<void>()

export const isLoading$ = new Subject<boolean>()

export const error$ = new Subject<Error|null>()

// Effects
load$.pipe(
  tap(() => {
    isLoading$.next(true)
    error$.next(null)
  }),

  switchMap(() => fromFetch('/api/invoices').pipe(
    // handle api error could be a custom rxjs operator that checks for errors, attempts retries if necessary
    // it can also emit error in some sort of global error stream of into toast
    //
    // I have a global error stream and an effect that aggregates multiple errors together over a 3s time window
    //
    // then it shows a single toast to the user
    handleApiError(error$),
    switchMap(response => response.json())
  )),

  switchMap(await collection => {
    database?.invoices.bulkPut(collection)
  }),

  tap(() => {
    isLoading$.next(false)
  })
).subscribe()

useEffect(() => {
  invoices.load$.next()

  invoices.query$.next({})
  invoices.page$.next(0)
}, [])

[[1, "d429"], [2, "x9s2"], ...]