RTK QueryIntermediate

Selectors — useSelector ও Memoization

useSelector-এর কাজ, object সিলেক্ট করার বিপদ, createSelector — বাংলায়।

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

useSelector React-এ state থেকে একটি ভ্যালু বেছে নেয়; store-এ পরিবর্তন হলে এর selected ভ্যালু না-বদলালে component re-render হয় না। কিন্তু object/array select করলে new reference নতুন render ট্রিগার করে — এতে সতর্ক থাকা দরকার।

খারাপ প্যাটার্নtsx

tsx

// প্রতিবার store update-এ re-render হয় —
// (state.cart) new object reference
const all = useAppSelector((state) => state.cart);

ভালো — ছোট অংশ selecttsx

tsx

const items = useAppSelector((state) => state.cart.items);
const count = useAppSelector((state) =>
  state.cart.items.reduce((sum, i) => sum + i.qty, 0),
);

createSelector

src/features/cart/cartSelectors.tsts

import { createSelector } from "@reduxjs/toolkit";

export const selectCartItems = (state: RootState) => state.cart.items;

export const selectCartCount = createSelector(
  [selectCartItems],
  (items) => items.reduce((sum, i) => sum + i.qty, 0),
);

export const selectCartTotal = createSelector(
  [selectCartItems],
  (items) =>
    items.reduce(
      (sum, i) => sum + i.qty * (pricePerItem(i.productId) ?? 0),
      0,
    ),
);

createSelector-input শ্যাডো

createSelector-এর শেষ ফাংশনটি cache করে শুধুমাত্র যখন তার input selector-এর ভ্যালু পরিবর্তন হয়। calculations new-array/expensive হলে ব্যবহার করবেন — ভেতরে object select-ও শুধু প্রয়োজন হলে।

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