useSelector with several dependencies

[Developer062025]

Hi.

I started migrating my application from connect to useSelector, and i started to face some situations that bothers me.

The problem comes when i have a normalized store and i need selectors to derive data that depends of other selectors derived data, that depends of more selectors inside of them.

According to the hypothetical situation from my imagination below:
(ignore the fact that i could do things differently)

// Regions reducer state
state = {
  regions: [
    { id: 'rrid00', name: 'South City', tip: 0.3 },
    { id: 'rrid01', name: 'Noth City', tip: 0.1 }
  ]
}

// Sellers reducer state
state = {
  sellers: [
    { id: 'uuid00', regionId: 'rrid00', name: 'Sun Farm', tip: 0.1 },
    { id: 'uuid01', regionId: 'rrid01', name: 'Happy Farm', tip: 0.1 }
  ]
}

// Products reducer state
state = {
  products: [
    { id: 'nnid00', name: 'Apple', price: 1.20 },
    { id: 'nnid01', name: 'Orange', price: 1.30 }
  ],
}

// Invoice reducer state 
state = {
  customerId,
  items: [
    { id: 'bbid00', productId: 'nnid00', quantity: 3, sellerId: 'uuid00' },
    { id: 'bbid01', productId: 'nnid01', quantity: 1, sellerId: 'uuid00' }
  ]
}

Lets say i want to derive the invoice total price

// Deriving invoice total price
function selectInvoicePrice(items, sellers, products, regions) {
  let totalPrice = 0

  items.forEach(item => totalPrice += selectItemTotalPrice(item, sellers, products, regions))

  return totalPrice  
}

function selectItemTotalPrice(item, sellers, products, regions) {
  const product = selectProductById(item.productId, products)
  const productPrice = selectProductPrice(product, sellers, regions)
  
  return productPrice * item.quantity
}

function selectProductPrice(product, sellers, regions) {
  const seller = selectSellerById(product.sellerId, sellers)
  const sellerTip = selectSellerTip(seller, regions)

  return product.price + sellerTip
}

function selectSellerTip(seller, regions) {
  const region = selectRegionById(seller.regionId, regions)

  return seller.tip + region.tip
}

As you can see, im starting to pass all the states as dependencies to each selector.

Is there a cleaner way to do this?

I could simple access the store.getState or useSelector inside of each selector, to get the piece of state that i need.

But is that an appropriate aproach?

[markerikson]

What you've got seems fine to me.