RTK QueryBeginner

Redux Architecture — একমুখী Data Flow

Store, Action, Reducer, Dispatch — চারটি স্তর কীভাবে একসাথে কাজ করে — বাংলায়।

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

Redux-এর একমুখী (unidirectional) data flow একটি মাত্র দিক অনুসরণ করে: UI → dispatch(action) → reducer → new state → UI আবার render। এ কারণে সমীকরণটা আবার track করা easy।

Redux data flowtext

text

UI (click) ──► dispatch({ type: "cart/add", payload })
                    │
                    ▼
            reducer(state, action)  ──►  new state
                    │
                    ▼
           store.subscribe / useSelector
                    │
                    ▼
           UI re-render (new state)

চারটি মূল অংশ

অংশ	কাজ
Store	সম্পূর্ণ app-এর current state-র এক-এক container
Action	কী ঘটেছে — একটি `{ type, payload }` object
Reducer	একটি pure function — (state, action) → new state
Dispatch	action-কে store-এ পাঠানোর function

উদাহরণ scopets

// action
{ type: "cart/addItem", payload: { productId: "p1", qty: 2 } }

// reducer (pure)
function cartReducer(state = [], action) {
  switch (action.type) {
    case "cart/addItem":
      return addItemLogic(state, action.payload);
    default:
      return state;
  }
}

Pure reducer

Reducer কখনো state-কে mutate করেন না — সর্বদা নতুন object/array return করেন। অন্যথায় React/Redux-এ পরিবর্তন detect হয় না, আর time-travel debug ভাঙে। Redux Toolkit-এ Immer এই নিয়ম enforce করে।

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