Redux: এটি কী, React Native-এ স্টেট ম্যানেজমেন্ট প্যাটার্ন
Redux হল JavaScript অ্যাপ্লিকেশনের জন্য একটি পূর্বানুমেয় স্টেট ম্যানেজমেন্ট কন্টেইনার, যা Dan Abramov 2015 সালে তৈরি করেছেন। Redux Flux আর্কিটেকচারের উপর ভিত্তি করে একমুখী ডেটা প্রবাহ বাস্তবায়ন করে: স্টেট একটি একক Store-এ সংরক্ষিত হয়, শুধুমাত্র বিশুদ্ধ Reducer ফাংশনের মাধ্যমে পরিবর্তিত হয় এবং Dispatch-সহ Action-এর মাধ্যমে শুরু হয়। npm Trends-এর তথ্য অনুসারে, Redux সাপ্তাহিক ৭ মিলিয়নেরও বেশি ডাউনলোড ধরে রেখেছে, যা React Native এবং ওয়েব অ্যাপ্লিকেশনে স্টেট ম্যানেজমেন্টের মানদণ্ড হিসেবে রয়ে গেছে।
মূল পয়েন্ট
- Store — একমাত্র সত্যের উৎস, সম্পূর্ণ অ্যাপ্লিকেশন স্টেট ট্রি সংরক্ষণ করে
- Action — type ফিল্ড সহ একটি অবজেক্ট, স্টেট পরিবর্তনের ইচ্ছা বর্ণনা করে
- Reducer — বিশুদ্ধ ফাংশন (prevState, action) => newState সাইড-ইফেক্ট ছাড়া
- Dispatch — Reducer-এ Action পাঠানোর জন্য Store পদ্ধতি
- Middleware — অ্যাসিঙ্ক্রোনাস অপারেশন এবং লগিংয়ের জন্য dispatch এবং reducer-এর মধ্যে স্তর
Redux কী?
Redux হল একটি আর্কিটেকচারাল প্যাটার্ন এবং স্টেট ম্যানেজমেন্টের জন্য লাইব্রেরি, যা তিনটি নীতির উপর ভিত্তি করে: একমাত্র সত্যের উৎস, শুধুমাত্র পঠনযোগ্য স্টেট এবং বিশুদ্ধ ফাংশনের মাধ্যমে পরিবর্তন। MVC-এর বিপরীতে, যেখানে মডেল অপ্রত্যাশিতভাবে স্টেট পরিবর্তন করতে পারে, Redux নিয়তিবাদ নিশ্চিত করে: একই ইনপুট ডেটার সাথে, ফলাফল সর্বদা একই থাকে।
Redux Facebook-এর Flux আর্কিটেকচার এবং Elm ভাষা দ্বারা অনুপ্রাণিত ছিল। Flux-এর থেকে প্রধান পার্থক্য হল একাধিকের পরিবর্তে একটি একক Store। Redux-এ, সম্পূর্ণ অ্যাপ্লিকেশন স্টেট — অবজেক্ট, অ্যারে, লোডিং ফ্ল্যাগ — একটি একক ট্রিতে সংরক্ষিত হয়। এটি ডিবাগিং, টেস্টিং এবং টাইম-ট্র্যাভেল ডিবাগিং সহজ করে। ডেভেলপার সম্পূর্ণ Store সংরক্ষণ করতে পারে, Action-এর ক্রম পুনরায় চালাতে পারে এবং দেখতে পারে যে প্রতিটি ধাপে স্টেট কীভাবে পরিবর্তিত হয়েছে।
State of JS 2025 জরিপ অনুসারে, স্টেট ম্যানেজমেন্ট ব্যবহার করা 68% উত্তরদাতা Redux বা Redux Toolkit বেছে নেন। টুলটি সমস্ত আধুনিক ফ্রেমওয়ার্ক দ্বারা সমর্থিত: React, React Native, Angular, Vue এবং এমনকি ফ্রেমওয়ার্ক ছাড়া ভ্যানিলা JavaScript।
একমুখী ডেটা প্রবাহ
একমুখী ডেটা প্রবাহ হল Redux-এর মূল নীতি, যেখানে ডেটা কঠোরভাবে এক দিকে চলে: View → Action → Dispatch → Reducer → Store → View। কোনো উপাদান Store সরাসরি পরিবর্তন করতে পারে না। View শুধুমাত্র useSelector বা connect-এর মাধ্যমে পরিবর্তনে সাবস্ক্রাইব করে এবং dispatch-এর মাধ্যমে পরিবর্তন শুরু করে।
Redux কর্মপ্রবাহ চক্র: ব্যবহারকারী একটি বোতাম চাপে → উপাদান dispatch({ type: 'INCREMENT' }) কল করে → Store Action-কে Root Reducer-এ পাঠায় → Reducer নতুন স্টেট গণনা করে → Store গ্রাহকদের জানায় → View নতুন ডেটা দিয়ে পুনরায় রেন্ডার হয়। এই চক্র নিশ্চিত করে যে প্রতিটি পরিবর্তনের একটি নির্দিষ্ট Action-এর আকারে স্পষ্ট কারণ রয়েছে।
DevTools — প্রতিটি Action, Store স্টেট এবং এক্সিকিউশন সময় পর্যবেক্ষণের জন্য Redux-এ নির্মিত টুল। ডেভেলপার সমস্ত প্রেরিত Action-এর তালিকা, আগে ও পরে স্টেট পার্থক্য (diff) দেখে এবং যেকোনো পূর্ববর্তী স্টেটে ফিরে যেতে পারে। এটি জটিল স্টেটের ডিবাগিং প্রচলিত লগিংয়ের তুলনায় কয়েকগুণ দ্রুত করে।
Redux-এর মূল উপাদান
Store — একটি অবজেক্ট যা সম্পূর্ণ অ্যাপ্লিকেশন স্টেট ট্রি ধারণ করে। configureStore (RTK) বা createStore-এর মাধ্যমে তৈরি হয়। Store তিনটি পদ্ধতি প্রদান করে: getState() পড়ার জন্য, dispatch(action) পরিবর্তনের জন্য এবং subscribe(listener) সাবস্ক্রিপশনের জন্য। Redux Toolkit-এ, Store ইতিমধ্যে middleware, DevTools এবং স্লাইস সমর্থন অন্তর্ভুক্ত করে।
TypeScript
import { configureStore } from '@reduxjs/toolkit'
interface CounterState {
value: number
}
const initialState: CounterState = { value: 0 }
function counterReducer(
state = initialState,
action: { type: string }
): CounterState {
switch (action.type) {
case 'INCREMENT':
return { value: state.value + 1 }
default:
return state
}
}
const store = configureStore({ reducer: counterReducer })
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState()) // { value: 1 }Action এবং Action Creator — Action হল একটি অবজেক্ট যার সাথে বাধ্যতামূলক type ফিল্ড (একটি স্ট্রিং ধ্রুবক) এবং ঐচ্ছিক payload (ডেটা) থাকে। Action Creator হল একটি ফাংশন যা Action ফেরত দেয়। Redux Toolkit-এ, স্বয়ংক্রিয় টাইপিং সহ Action তৈরি করতে createAction ব্যবহার করা হয়।
Reducer — একটি বিশুদ্ধ ফাংশন যা বর্তমান স্টেট এবং Action গ্রহণ করে, নতুন স্টেট ফেরত দেয়। Reducer-কে উচিত নয়: স্টেট মিউটেট করা (নতুন অবজেক্ট ফেরত দেওয়া হয়), API কল করা, এলোমেলো সংখ্যা তৈরি করা বা Date অ্যাক্সেস করা। অপরিবর্তনীয়তা স্প্রেড অপারেটর ... বা Immer (RTK-তে নির্মিত) এর মাধ্যমে নিশ্চিত করা হয়।
| উপাদান | দায়িত্ব | সীমাবদ্ধতা |
|---|---|---|
| Store | স্টেট সংরক্ষণ, dispatch, subscribe | প্রতি অ্যাপ্লিকেশনে একটি |
| Action | স্টেট পরিবর্তনের ইচ্ছা বর্ণনা | type থাকতে হবে |
| Reducer | নতুন স্টেট গণনা | বিশুদ্ধ ফাংশন, সাইড-ইফেক্ট ছাড়া |
| Dispatch | Reducer-এ Action পাঠানো | ডিফল্টরূপে সিঙ্ক্রোনাস |
| Selector | Store থেকে ডেটা নিষ্কাশন | createSelector-এর মাধ্যমে মেমোইজেশন |
Middleware এবং Redux Thunk
Middleware হল ফাংশনের একটি শৃঙ্খল যা dispatch কল এবং Action Reducer-এ পৌঁছানোর মধ্যে স্থাপিত হয়। প্রতিটি middleware Store API গ্রহণ করে এবং Action লগ, পরিবর্তন, বিলম্ব বা বাতিল করতে পারে। Redux Thunk হল অ্যাসিঙ্ক্রোনাস অপারেশনের জন্য মানক middleware, যা অবজেক্টের পরিবর্তে ফাংশন dispatch করার অনুমতি দেয়।
JavaScript
import { createAsyncThunk } from '@reduxjs/toolkit'
export const fetchUser = createAsyncThunk(
'users/fetchById',
async (userId: number, { rejectWithValue }) => {
const response = await fetch(`/api/users/${userId}`)
if (!response.ok)
return rejectWithValue('Failed to fetch')
return await response.json()
}
)জনপ্রিয় middleware: Redux Thunk — সাধারণ অ্যাসিঙ্ক্রোনাস কলের জন্য, Redux Saga — জেনারেটর সাগা সহ জটিল পরিস্থিতির জন্য (debounce, race, সমান্তরাল অনুরোধ), Redux Observable — প্রতিক্রিয়াশীল স্ট্রিমের জন্য RxJS-এর উপর ভিত্তি করে। Redux Toolkit-এ, middleware configureStore-এ middleware প্যারামিটারের মাধ্যমে সংযুক্ত হয়।
State of JS 2025 জরিপ অনুসারে, Thunk 72% Redux প্রকল্পে, Saga 18% এবং Observable 5%项目中 ব্যবহৃত হয়। বেশিরভাগ অ্যাপ্লিকেশনের জন্য, Thunk + RTK Query-এর সংমিশ্রণ অ্যাসিঙ্ক্রোনাস ডেটা কর্মপ্রবাহের 95% কভার করার জন্য যথেষ্ট।
Redux Toolkit এবং RTK Query
Redux Toolkit (RTK) হল Redux লজিক লেখার অফিসিয়াল, প্রস্তাবিত উপায়, যা 2019 সালে প্রকাশিত হয়েছে। RTK-তে configureStore, createSlice, createAsyncThunk এবং createEntityAdapter অন্তর্ভুক্ত রয়েছে, যা Redux boilerplate 60-70% কমিয়ে দেয়। ম্যানুয়ালি Action Creator, Reducer এবং টাইপ তৈরি করার পরিবর্তে, একটি একক createSlice ব্যবহার করা হয়।
TypeScript
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment(state) { state.value += 1 },
incrementByAmount(state, action: PayloadAction<number>) {
state.value += action.payload
}
}
})
export const { increment, incrementByAmount } = counterSlice.actions
export default counterSlice.reducerRTK Query হল Redux Toolkit-এর উপর ভিত্তি করে API-এর সাথে কাজ করার জন্য একটি অন্তর্নির্মিত সমাধান। এটি createApi-এর মাধ্যমে ঘোষণামূলকভাবে এন্ডপয়েন্ট সংজ্ঞায়িত করার অনুমতি দেয় স্বয়ংক্রিয় হুক জেনারেশন, ক্যাশিং, ট্যাগ অকার্যকরকরণ এবং আশাবাদী আপডেট সহ। RTK Query প্রতিটি API অনুরোধের জন্য ম্যানুয়াল Thunk, Reducer এবং Selector লেখার পরিবর্তে ব্যবহার করা হয়।
Entity Adapter — এন্টিটি সংগ্রহ স্বাভাবিক করার জন্য createEntityAdapter ইউটিলিটি। অবজেক্ট অ্যারের জন্য অন্তর্নির্মিত CRUD রিডিউসার, সিলেক্টর এবং সর্টিং প্রদান করে। যদি Store-এ ব্যবহারকারী, পণ্য বা অর্ডারের তালিকা থাকে — Entity Adapter রিডিউসার কোড 80% কমিয়ে দেয়।
React Native-এ Redux
React Native Redux হল JavaScript-এ মোবাইল অ্যাপ্লিকেশনের জন্য মানক স্ট্যাক। Redux react-redux থেকে Provider-এর মাধ্যমে একীভূত হয়, যা রুট অ্যাপ্লিকেশন উপাদানকে মোড়ানো করে। useSelector এবং useDispatch হুকগুলি উপাদানগুলিকে props drilling ছাড়া স্টেটে অ্যাক্সেস দেয়। Persist — redux-persist Store-কে AsyncStorage বা MMKV-তে সংরক্ষণ করে, অ্যাপ্লিকেশন পুনরায় চালু করার পর স্টেট পুনরুদ্ধার করে।
React Native-এর জন্য Middleware: Flipper-এর মাধ্যমে ডিবাগিংয়ের জন্য redux-flipper, নেটিভ ড্রাইভার সহ প্রতিক্রিয়াশীল স্ট্রিমের জন্য redux-observable, দ্রুত স্থায়ী স্টোরেজের জন্য react-native-mmkv। নেভিগেশন প্লাগইন redux-first-router স্ক্রিনগুলিকে Store-এর সাথে সংযুক্ত করে, ফিরে আসার সময় স্ক্রিন স্টেট পুনরুদ্ধার করার অনুমতি দেয়।
React Native-এ, Redux একটি নেটওয়ার্ক-প্রথম কৌশলের সাথে ব্যবহার করা হয়: অ্যাপ প্রথমে সার্ভার থেকে ডেটা লোড করার চেষ্টা করে, তারপর এটি RTK Query বা redux-persist-এর মাধ্যমে Store-এ ক্যাশ করে। অফলাইন মোড Redux + NetInfo + সংযোগ পুনরুদ্ধার হওয়ার সময় পুনরায় পাঠানোর জন্য Action সারির সমন্বয়ে অর্জিত হয়।
সচরাচর জিজ্ঞাসা
Redux কীভাবে React-এর Context API থেকে আলাদা?
Redux Store, DevTools, Middleware এবং অপরিবর্তনীয় স্টেট সহ একটি পূর্ণ-বৈশিষ্ট্যযুক্ত সমাধান। Context API React-এ props drilling ছাড়া ডেটা পাস করার জন্য একটি অন্তর্নির্মিত প্রক্রিয়া। Context গ্লোবাল থিম এবং স্থানীয়করণের জন্য উপযুক্ত, যখন Redux অ্যাসিঙ্ক্রোনাস অপারেশন, ক্যাশিং এবং ডিবাগিং সহ জটিল স্টেটের জন্য। বড় অ্যাপ্লিকেশনে, Context অপ্রয়োজনীয় পুনরায় রেন্ডারিং ঘটায়, যখন Redux সিলেক্টরের সাথে এই সমস্যার সমাধান করে।
Redux Toolkit-এ Immer কী?
Immer হল অপরিবর্তনীয় স্টেট ম্যানেজমেন্টের জন্য একটি লাইব্রেরি, যা Redux Toolkit-এ নির্মিত। Immer আপনাকে রিডিউসার লিখতে দেয় যেন আপনি সরাসরি স্টেট মিউটেট করছেন: state.value += 1। ভিতরে, Immer একটি প্রক্সি অবজেক্ট (draft) তৈরি করে, পরিবর্তনগুলি ট্র্যাক করে এবং একটি নতুন অপরিবর্তনীয় অবজেক্ট ফেরত দেয়। এটি রিডিউসার কোডের পরিমাণ 50% কমায় এবং দুর্ঘটনাজনিত মিউটেশন দূর করে।
Redux কীভাবে পরীক্ষা করবেন?
Redux লজিক বিচ্ছিন্নভাবে পরীক্ষা করা হয়: Reducer — একটি বিশুদ্ধ ফাংশন, বিভিন্ন Action দিয়ে কল করুন এবং ফলাফল পরীক্ষা করুন। Action Creator — ফেরত দেওয়া অবজেক্ট যাচাই করুন। Thunk — API মক করুন, dispatch কল করুন এবং কোন Action পাঠানো হয়েছে তা পরীক্ষা করুন। useSelector সহ উপাদান — রেন্ডারারে পরীক্ষার Store সহ Provider ব্যবহার করুন। Redux DevTools একটি বাস্তব সেশন থেকে Action ক্রম পুনরায় চালিয়ে পরীক্ষা লিখতে সহায়তা করে।
কখন useState-এর পরিবর্তে Redux ব্যবহার করবেন?
useState একটি একক উপাদানের স্থানীয় স্টেটের জন্য যথেষ্ট: ফিল্ড টেক্সট, মডাল খোলা/বন্ধ। Redux প্রয়োজন যখন স্টেট অনেক স্ক্রিনের মধ্যে ভাগ করা হয়, অ্যাসিঙ্ক্রোনাস সিঙ্ক্রোনাইজেশন (সার্ভার থেকে ডেটা) প্রয়োজন, অ্যাপ্লিকেশন পুনরায় চালুর মধ্যে সংরক্ষণ করতে হবে (persist), বা টাইম-ট্র্যাভেল ডিবাগিং প্রয়োজন। ছোট অ্যাপ্লিকেশনের জন্য, Redux অতিরিক্ত — পরিবর্তে Context + useReducer ব্যবহার করুন।
Redux-এ নরমালাইজেশন কী?
Normalizr হল নেস্টেড ডেটাকে ফ্ল্যাট Store স্ট্রাকচারে নরমালাইজ করার জন্য একটি লাইব্রেরি। user.posts[0].comments-এর মতো গভীর অবজেক্ট সংরক্ষণ করার পরিবর্তে, নরমালাইজেশন ডিকশনারি তৈরি করে: entities.users, entities.posts, entities.comments ID দ্বারা রেফারেন্স সহ। এটি একক এন্টিটি সর্বত্র আপডেট করা সহজ করে এবং সিলেক্টরকে দ্রুত করে। Redux Toolkit জটিল মডেলের জন্য নরমালাইজড ডেটা সুপারিশ করে।
সারসংক্ষেপ
- Redux — একটি একক Store এবং বিশুদ্ধ Reducer সহ পূর্বানুমেয় স্টেট কন্টেইনার
- Action — type সহ অবজেক্ট, Reducer — বিশুদ্ধ ফাংশন, Dispatch — প্রেরণ প্রক্রিয়া
- Redux Toolkit — createSlice, createAsyncThunk এবং RTK Query সহ অফিসিয়াল API
- Middleware — অ্যাসিঙ্ক্রোনিসিটির জন্য স্তর: Thunk, Saga, Observable
- React Native অফলাইন মোডের জন্য Provider, useSelector এবং redux-persist-এর মাধ্যমে একীভূত হয়
- DevTools — প্রতিটি Action-এর পুনরায় চালানোর সাথে টাইম-ট্র্যাভেল ডিবাগিং
- Normalizr — দক্ষ সিলেক্টর এবং আপডেটের জন্য ডেটা নরমালাইজেশন
আমরা একটি মোবাইল অ্যাপ্লিকেশন টার্নকি তৈরি করব
IT Sectr 2017 সাল থেকে স্টার্টআপ এবং ব্যবসার জন্য iOS এবং Android অ্যাপ্লিকেশন তৈরি করে। আমরা আপনাকে পরামর্শ দেব এবং সেরা সমাধান প্রস্তাব করব।
আরও পড়ুন