RTK QueryAdvanced

RTK Query Selectors — selectFromResult

selectFromResult, transformResponse, selectors-এর derivation — বাংলায়।

6টি অংশবাংলা ভাষায়

SelectFromResult — re-render limittsx

tsx

"use client";

import { useGetOrdersQuery, useGetProductsQuery } from "@/features/orders/ordersService";

export function OrderCountBadge() {
  const { count } = useGetOrdersQuery(undefined, {
    // পুরো data-র বদলে শুধু count বদলানো হলে re-render
    selectFromResult: (result) => ({
      count: result.data?.length ?? 0,
    }),
  });

  return <Badge>{count}টি অর্ডার</Badge>;
}

transformResponse

সার্ভার shape→client shapets

getProducts: builder.query<Product[], void>({
  query: () => "products",
  transformResponse: (raw: APIEnvelope) => {
    // { items: [...], total } → সব Product[]
    return raw.items;
  },
}),

Derived selectors

cache-থেকে cart-সাথে মিলানোts

// একটি selector: cartItem-product details
export const useCartWithDetails = () => {
  const items = useAppSelector(selectCartItems);
  const { data: products } = useGetProductsQuery();

  return items.map((item) => {
    const product = products?.find((p) => p.id === item.productId);
    return { ...item, product };
  });
};

select-এ সংযম

selectFromResult-এ শুধু সত্যিই দরকারি অংশ select করুন — বড় data object select করলে অপ্রয়োজনীয় re-render হয়। যা যা UI-তে পড়ে, শুধু তা-ই select করুন।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।