Redux State এবং Props এর সমন্বয়

React অ্যাপ্লিকেশন তৈরি করার সময়, props এবং state দুটি গুরুত্বপূর্ণ কনসেপ্ট। State একটি কম্পোনেন্টের অভ্যন্তরীণ ডাটা ধারণ করে এবং props কম্পোনেন্টগুলির মধ্যে ডাটা প্রেরণের জন্য ব্যবহৃত হয়। Redux স্টেট ম্যানেজমেন্ট, একটি অ্যাপ্লিকেশনের global state পরিচালনা করার জন্য ব্যবহৃত হয়। কিন্তু যখন Redux স্টেট এবং React কম্পোনেন্টের props একসঙ্গে ব্যবহৃত হয়, তখন তাদের মধ্যে সমন্বয় কিভাবে করা যায়, তা জানা প্রয়োজন।

এখানে, Redux স্টেট এবং React props এর মধ্যে কীভাবে সমন্বয় করা যায়, তার বিস্তারিত আলোচনা করা হবে।

Redux State এবং React Props এর মধ্যে পার্থক্য

• Redux State: এটি অ্যাপ্লিকেশন সারা জুড়ে শেয়ার করা স্টেট। Redux স্টেট সাধারণত store তে থাকে এবং সমস্ত কম্পোনেন্টের জন্য অ্যাক্সেসযোগ্য হয়।
• React Props: এটি শুধুমাত্র প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডাটা প্রেরণের জন্য ব্যবহৃত হয়। Props একটি কম্পোনেন্টের অভ্যন্তরে শুধুমাত্র প্যারেন্ট কম্পোনেন্টের দ্বারা পাস করা হয়।

Redux স্টেট মূলত অ্যাপ্লিকেশন এর global state হিসাবে কাজ করে, যেখানে props শুধুমাত্র নির্দিষ্ট কম্পোনেন্টের মধ্যে ডাটা আদান-প্রদান করে।

Redux State কে Props হিসেবে কম্পোনেন্টে ব্যবহার করা

React কম্পোনেন্টে Redux স্টেট ব্যবহার করার জন্য useSelector() হুক ব্যবহার করা হয়। এই হুকটি আপনাকে Redux স্টোর থেকে স্টেট এনে কম্পোনেন্টের props হিসেবে পাঠাতে সাহায্য করে।

উদাহরণ:

ধরা যাক, একটি অ্যাপ্লিকেশন যেখানে আমরা Todo List দেখাচ্ছি এবং Todo এর লিস্ট Redux স্টেট থেকে আসবে।

Redux স্লাইস (todoSlice.js):

import { createSlice } from '@reduxjs/toolkit';

const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload);
    },
    removeTodo: (state, action) => {
      return state.filter(todo => todo.id !== action.payload.id);
    },
  },
});

export const { addTodo, removeTodo } = todoSlice.actions;
export default todoSlice.reducer;

স্টোর কনফিগারেশন (store.js):

import { configureStore } from '@reduxjs/toolkit';
import todoReducer from './todoSlice';

const store = configureStore({
  reducer: {
    todos: todoReducer,
  },
});

export default store;

React কম্পোনেন্টে Redux স্টেট ব্যবহার করা:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addTodo, removeTodo } from './todoSlice';

const TodoApp = () => {
  const dispatch = useDispatch();
  const todos = useSelector((state) => state.todos);

  const handleAddTodo = (text) => {
    const newTodo = { id: Date.now(), text };
    dispatch(addTodo(newTodo));
  };

  const handleRemoveTodo = (id) => {
    dispatch(removeTodo({ id }));
  };

  return (
    <div>
      <button onClick={() => handleAddTodo('Learn Redux')}>Add Todo</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            {todo.text} <button onClick={() => handleRemoveTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoApp;

এখানে:

• useSelector() হুক ব্যবহার করে Redux স্টেট থেকে todos সংগ্রহ করা হচ্ছে এবং এটি কম্পোনেন্টের props হিসেবে ব্যবহৃত হচ্ছে।
• useDispatch() হুক ব্যবহার করে addTodo এবং removeTodo একশন ডিসপ্যাচ করা হচ্ছে।

Redux State এবং Props এর মধ্যে সমন্বয়

Redux স্টেট এবং React Props একসঙ্গে ব্যবহারের সময়, Redux স্টেটকে React কম্পোনেন্টের props হিসেবে অ্যাসাইন করা হয় এবং যে কোনো পরিবর্তন (যেমন নতুন Todo যোগ করা) Redux স্টেটে আপডেট হয়।

Redux স্টেট থেকে Props এ ডাটা পাঠানো:

Redux স্টেট সাধারণত useSelector() হুক ব্যবহার করে কম্পোনেন্টে পৌঁছানো হয়। useSelector() Redux স্টেটের নির্দিষ্ট অংশকে নির্বাচিত (select) করে React কম্পোনেন্টে পাঠায়, এবং এটি props হিসেবে ব্যবহৃত হয়। যখন Redux স্টেট পরিবর্তিত হয়, তখন React কম্পোনেন্টে props স্বয়ংক্রিয়ভাবে আপডেট হয়।

Props এর মাধ্যমে একশন Dispatcher:

যখন Redux স্টেটে কোনো পরিবর্তন করার দরকার হয়, তখন dispatch ফাংশন ব্যবহার করা হয়। এই ফাংশনটি একটি একশনকে ডিসপ্যাচ করে এবং রিডিউসার সেই একশনটি হ্যান্ডেল করে স্টেট পরিবর্তন করে।

Redux State এবং Props এর মধ্যে সম্পর্ক এবং প্রভাব

Redux স্টেট এবং Props এর মধ্যে সম্পর্ক বোঝা প্রয়োজন যখন আপনি একটি অ্যাপ্লিকেশনে Redux ব্যবহার করছেন। কিছু মূল পয়েন্ট এখানে তুলে ধরা হলো:

1. Redux State আপনার অ্যাপ্লিকেশনের global state এবং এটি সকল কম্পোনেন্টের মধ্যে শেয়ার করা যায়।
2. Props শুধুমাত্র এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডাটা পাঠানোর জন্য ব্যবহৃত হয়।
3. Redux স্টেটকে React props হিসেবে ব্যবহার করার মাধ্যমে আপনি গ্লোবাল স্টেটকে আপনার UI কম্পোনেন্টে অন্তর্ভুক্ত করতে পারেন।
4. যখন Redux স্টেট পরিবর্তন হয়, তখন React কম্পোনেন্টগুলোর props স্বয়ংক্রিয়ভাবে আপডেট হয়, কারণ Redux স্টেটকে React props হিসেবে সরবরাহ করা হয়।
5. React কম্পোনেন্টে props পরিবর্তন বা আপডেট করার জন্য dispatch ফাংশন ব্যবহার করা হয় যা Redux স্টেটে পরিবর্তন আনে।

Redux State এবং Props এর মধ্যে সঠিক সমন্বয় করা

Redux এবং React Props এর সঠিক সমন্বয় করার জন্য কিছু গুরুত্বপূর্ণ টিপস:

1. Props Through Dispatch: যখন আপনাকে স্টেট পরিবর্তন করতে হয়, তখন props এর মাধ্যমে একশন ডিসপ্যাচ করুন। React কম্পোনেন্টে props আকারে একশন পাস করে এটি Redux স্টেট পরিবর্তন করবে।
2. Local State vs Redux State: যদি কোনো ডাটা শুধুমাত্র এক কম্পোনেন্টের মধ্যে ব্যবহৃত হয়, তাহলে এটি কম্পোনেন্টের local state হিসাবে রাখতে পারেন। তবে যদি ডাটা একাধিক কম্পোনেন্টে শেয়ার করতে হয়, তাহলে সেটি Redux state এ রাখতে হবে।
3. Memoization: useSelector() হুক ব্যবহারের সময়, আপনার সিলেক্টর ফাংশনগুলো মেমোইজড (memoized) রাখা উচিত যাতে unnecessary re-renders এড়ানো যায়।

সারাংশ

Redux স্টেট এবং React props এর সমন্বয় করার মাধ্যমে আপনি অ্যাপ্লিকেশনের গ্লোবাল স্টেটকে সহজভাবে React কম্পোনেন্টে অন্তর্ভুক্ত করতে পারেন। useSelector() হুক Redux স্টেটকে props হিসেবে কম্পোনেন্টে পাঠায়, এবং useDispatch() হুক ব্যবহার করে স্টেট পরিবর্তন করতে একশন ডিস্ট্রিবিউট করা হয়। এইভাবে Redux স্টেট এবং React props এর মধ্যে কার্যকরী সমন্বয় করা যায়, যা অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট এবং ডাটা ফ্লোকে সহজ ও স্বচ্ছ করে তোলে।