RTK QueryIntermediate

Typed Hooks — useAppDispatch / useAppSelector

Pre-typed hooks বানিয়ে dispatch/selector-এ type safety — বাংলায়।

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

src/hooks/use-app-dispatch.tsts

"use client";

import { useDispatch, useSelector } from "react-redux";


// সর্বত্র এই hooks ব্যবহার করুন —
// টাইপড, তাই ভুল হলে compile-time-ই জামাল
export const useAppDispatch = useDispatch.withTypes<AppDispatch>();
export const useAppSelector = useSelector.withTypes<RootState>();

কেন typed hooks

useDispatch()-এ টাইপ না দিলে error silent হয়
useSelector((state) => state.cart.items) — RootState টাইপ অনুযায়ী autocomplete
App বড় হলে RootState প্রতিটি file-এ import না করে hooks-থেকে আসে

Component-এ usetsx

tsx

const dispatch = useAppDispatch();
const items = useAppSelector((state) => state.cart.items);

<button onClick={() => dispatch(increment(product.id))}>
  +
</button>

React Redux v9

useDispatch.withTypes<T>() / useSelector.withTypes<T>() হলো official typed-hook pattern (React-Redux v9 client)। বা useDispatch<AppDispatch>()-ও পুরনো method-ভালো — কোনোটিই ঠিক।

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