RTK QueryBeginner
Project Setup — E-commerce Storefront + Cart
আমরা কী project বানাব, কাঠামো, এবং package install — বাংলায়।
6টি অংশবাংলা ভাষায়
এই কোর্সে আমরা একটি ই-কমার্স Storefront + Shopping Cart project বানাব। এতে React/Next.js-এর সাথে Redux Toolkit ও RTK Query-র দারুণ সমন্বয় দেখাবে —
- RTK Query → products list/detail, orders create (server data, cache)
- Redux Toolkit slice → cart (client-side স্থানীয় state)
- Selector + typed hooks → component-এ data অ্যাক্সেস
Installts
ts
# React / Next 16 project (App Router)
npm i @reduxjs/toolkit react-redux
# optional: RTK Query (bundled in @reduxjs/toolkit)
# আর কিছু লাগে না — createApi/fetchBaseQuery ভেতরেই আছেData models
Typests
ts
type Product = {
id: string;
name: string;
price: number;
category: string;
stock: number;
image?: string;
};
type CartItem = {
productId: string;
qty: number;
};
type Order = {
id: string;
items: { productId: string; qty: number }[];
total: number;
createdAt: string;
};এই combination কেন?
এটি বাস্তব জগতের best practice: Cart সার্ভার-class state নয় — এটি session/client-এ থাকে। তাই cart রাখি slice-এ, products/orders রাখি RTK Query-এ। এই split-ই একটি অ্যাপের server-state ও client-state-এর প্রকৃত পার্থক্য তুলে ধরে।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।