RTK QueryAdvanced
Complete Flow — Storefront থেকে Order পর্যন্ত
কার্ট যোগ → অর্ডার — পুরো উদাহরণ, Slice ও RTK Query-র সমন্বয় — বাংলায়।
6টি অংশবাংলা ভাষায়
এখন সব টুকরো এক পেজে মেলে দেখি — Storefront → Cart → Checkout → Order — Redux slice (cart) আর RTK Query (products/orders) একসাথে কীভাবে মসৃণভাবে কাজ করে।
Checkout flow ধাপে ধাপে
State journeytext
text
1) Storefront mount → useGetProductsQuery() fetch (cache)
2) "কার্টে যোগ" click → dispatch(addItem(...)) (slice)
3) CartDrawer → items×product-price → total
4) Checkout click → createOrder({ items }).unwrap() (mutation)
5) Success → listenerMiddleware → toast + clearCart()
6) Invalidation "Order" → orders list auto-refetchএকসাথে সব hooks
checkout-in-one.tsxts
ts
function useCheckout() {
const items = useAppSelector(selectCartItems);
const dispatch = useAppDispatch();
const [createOrder, result] = useCreateOrderMutation();
const total = useAppSelector(selectCartTotal);
const { data: products } = useGetProductsQuery();
const checkout = async () => {
if (items.length === 0) return;
const order = await createOrder({ items }).unwrap();
dispatch(clearCart());
return order;
};
return { items, total, checkout, result };
}Refactor-friendly
সব logic hook/composable-তে ঢাকা — UI component-গুলো pure। এ structure-তে store, listener, RTK Query patch ছাড়াই নতুন flow যোগ করা সহজ।
শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।