RTK QueryBeginner

Redux Provider — Next.js-এ Wrap

react-redux-এর Provider দিয়ে পুরো app-কে store-এর সাথে সংযুক্ত — বাংলায়।

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

src/app/redux-provider.tsxtsx

tsx

"use client";

import { Provider } from "react-redux";
import { store } from "@/app/store";

export function ReduxProvider({ children }: { children: React.ReactNode }) {
  return <Provider store={store}>{children}</Provider>;
}

layout.tsx-এ mounttsx

tsx

import { ReduxProvider } from "./redux-provider";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="bn">
      <body>
        <ReduxProvider>{children}</ReduxProvider>
      </body>
    </html>
  );
}

কেন client component

React context-ভিত্তিক Provider client-only। তাই ReduxProvider-এ "use client" দরকার। Next.js App Router-এ এটি root layout-এ একবার mount করলেই পুরো app-এ store accessible। Server Components store-এর ভেতরে পড়তে পারে না (তারা context-হীন)।

Server-এ store

SSR-নির্দিষ্ট data (অ্যাল্টারনেট)tsx

tsx

// Server Component-তে:
// store সরাসরি নয় — API-র result নিজে প্রস্তুত fetch করে passing
// সার্ভারে প্রস্তুত data → client component-এ initial state

একই store instance ব্যবহারের নিয়ম

module-level singleton store সাধারণ client app-এ ঠিকঠাক কাজ করে। কিন্তু SSR-এ প্রতি request-এ আলাদা store দরকার — নাহলে এক request-এর data আরেক user দেখতে পারে। একটি makeStore() factory রাখুন এবং SSR-এ তা দিয়ে store তৈরি করুন। ছোট project-এ সরল singleton যথেষ্ট।

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