React-Redux এর মাধ্যমে Redux ইন্টিগ্রেশন

React এবং Redux দুটি একসাথে ব্যবহার করার মাধ্যমে আপনি অ্যাপ্লিকেশনের স্টেট পরিচালনা এবং ব্যবস্থাপনা অনেক সহজ এবং দক্ষভাবে করতে পারেন। React-Redux হল একটি অফিসিয়াল লাইব্রেরি যা React অ্যাপ্লিকেশনের সাথে Redux ইন্টিগ্রেশন সহজ করে। Redux স্টোর এবং React কম্পোনেন্টের মধ্যে যোগাযোগ স্থাপন করে, যাতে অ্যাপ্লিকেশনের স্টেট সেন্ট্রালাইজডভাবে পরিচালিত হয়।

এই টিউটোরিয়ালে আমরা React এবং Redux এর মধ্যে ইন্টিগ্রেশন কিভাবে করা হয় তা দেখব, যেখানে Redux store, actions, reducers এবং React-Redux hooks ব্যবহৃত হবে।

১. Redux এবং React-Redux ইনস্টলেশন

প্রথমে Redux এবং React-Redux ইনস্টল করতে হবে।

npm install redux react-redux

২. Redux স্টোর তৈরি করা

Redux স্টোর হল একটি সেন্ট্রাল ডাটাবেজ যেখানে আপনার অ্যাপ্লিকেশনের সব স্টেট রাখা হয়। Redux স্টোর তৈরি করতে, প্রথমে reducer তৈরি করতে হয়, যা অ্যাপ্লিকেশনের স্টেট ম্যানেজ করবে।

স্টোর তৈরি করার উদাহরণ:

// src/redux/store.js
import { createStore } from 'redux';

// Reducer function: defines how the state changes in response to actions
const initialState = {
  count: 0
};

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

// Creating Redux store
const store = createStore(counterReducer);

export default store;

এখানে, counterReducer ফাংশনটি অ্যাপের স্টেট হালনাগাদ করবে। যখন INCREMENT বা DECREMENT অ্যাকশন ট্রিগার হয়, তখন স্টেট আপডেট হবে।

৩. React-Redux Provider দিয়ে স্টোরকে কম্পোনেন্টে প্রদান করা

React অ্যাপ্লিকেশনে Redux স্টোর ইন্টিগ্রেট করার জন্য, Provider কম্পোনেন্ট ব্যবহার করতে হয়, যা স্টোরটিকে React অ্যাপের সব কম্পোনেন্টে পাস করে।

Provider কম্পোনেন্টের ব্যবহার:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './redux/store';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

এখানে, Provider কম্পোনেন্টে Redux স্টোর পাস করা হয়েছে, যা অ্যাপের প্রতিটি কম্পোনেন্টকে স্টোরে এক্সেস দেয়।

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

Redux স্টেট ব্যবহার করার জন্য React-Redux লাইব্রেরি useSelector এবং useDispatch নামক দুটি hook প্রদান করে।

• useSelector: Redux স্টোর থেকে স্টেট পড়তে ব্যবহৃত হয়।
• useDispatch: Redux অ্যাকশন ডিপ্লয় করতে ব্যবহৃত হয়।

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

// src/components/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  // Redux স্টোর থেকে count স্টেট পাওয়া
  const count = useSelector(state => state.count);

  // Redux অ্যাকশন ডিসপ্যাচ করার জন্য dispatch হুক
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

export default Counter;

ব্যাখ্যা:

• useSelector(state => state.count): এটি Redux স্টোর থেকে count স্টেট নেয়।
• dispatch({ type: 'INCREMENT' }): এটি INCREMENT অ্যাকশন ট্রিগার করে, যা Redux reducer এর মাধ্যমে স্টেট আপডেট করবে।

৫. Redux অ্যাকশন এবং রিডিউসার

Redux এর মধ্যে স্টেট পরিবর্তন করতে action এবং reducer দুটি গুরুত্বপূর্ণ কনসেপ্ট। অ্যাকশন হল এক ধরনের অবজেক্ট যা স্টেট পরিবর্তনের নির্দেশনা দেয়, এবং রিডিউসার হল ফাংশন যা স্টেট আপডেট করার জন্য সেই অ্যাকশন গ্রহণ করে।

অ্যাকশন (Action) উদাহরণ:

// src/redux/actions.js
export const increment = () => {
  return {
    type: 'INCREMENT',
  };
};

export const decrement = () => {
  return {
    type: 'DECREMENT',
  };
};

রিডিউসার (Reducer) উদাহরণ:

// src/redux/reducer.js
const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

৬. React-Redux DevTools

Redux ডেভেলপমেন্টের সময় স্টেট পরিবর্তন ট্র্যাক করার জন্য Redux DevTools ব্যবহৃত হয়। এটি React-Redux অ্যাপ্লিকেশনের জন্য একটি ব্রাউজার এক্সটেনশন, যা অ্যাপের স্টেট এবং অ্যাকশন পরিবর্তন ট্র্যাক করতে সাহায্য করে।

DevTools ইন্টিগ্রেট করতে, createStore এর মধ্যে window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ফাংশনটি ব্যবহার করতে হয়।

import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(
  counterReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

সারাংশ

React-Redux ইন্টিগ্রেশন React অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্টকে অনেক সহজ এবং সেন্ট্রালাইজড করে। Redux এর স্টোর, অ্যাকশন এবং রিডিউসার ব্যবহারের মাধ্যমে অ্যাপের স্টেট পরিচালনা করা হয়। useSelector এবং useDispatch hooks এর মাধ্যমে React কম্পোনেন্টে Redux স্টেট এবং অ্যাকশন ব্যবহার করা সম্ভব হয়। Redux-এ DevTools ব্যবহারের মাধ্যমে আপনি সহজেই স্টেট এবং অ্যাকশনের পরিবর্তন ট্র্যাক করতে পারেন।