Functional Components এর মধ্যে Redux ব্যবহারের উপায়

Redux সাধারণত React অ্যাপ্লিকেশনে state management এর জন্য ব্যবহৃত হয়। Redux-এর মাধ্যমে অ্যাপ্লিকেশনের স্টেট একত্রিত করা হয় এবং সেন্ট্রালাইজড ভাবে পরিচালিত হয়। যদি আপনি functional components ব্যবহার করেন, তবে Redux এর স্টেট ম্যানেজমেন্ট এবং action dispatch এর মাধ্যমে স্টেট আপডেট করা খুবই সহজ এবং কার্যকর।

React-Redux লাইব্রেরি Redux কে React এর সাথে সহজভাবে সংযুক্ত করতে সহায়তা করে। এই লাইব্রেরি দুটি প্রধান হুক প্রদান করে: useDispatch এবং useSelector, যেগুলোর মাধ্যমে functional components এর মধ্যে Redux ব্যবহারের প্রক্রিয়া সম্পন্ন হয়।

React Functional Components এ Redux ব্যবহারের প্রধান ধাপ

1. Redux Store তৈরি করা এবং কনফিগার করা
   প্রথমে Redux স্টোর তৈরি করা হয় এবং রিডিউসার সংযুক্ত করা হয়।
2. Redux Provider দিয়ে অ্যাপ্লিকেশনকে র‍্যাপ করা
   React-Redux লাইব্রেরির Provider কম্পোনেন্টের মাধ্যমে স্টোরটি অ্যাপ্লিকেশনকে প্রদান করা হয়।
3. State অ্যাক্সেস করা useSelector হুকের মাধ্যমে
   অ্যাপ্লিকেশনের স্টেট useSelector হুক ব্যবহার করে Redux স্টোর থেকে অ্যাক্সেস করা হয়।
4. Action Dispatch করা useDispatch হুকের মাধ্যমে
   useDispatch হুক ব্যবহার করে অ্যাকশন ডিসপ্যাচ করা হয় এবং স্টেটে পরিবর্তন আনা হয়।

Step-by-Step উদাহরণ

ধরা যাক, আমাদের একটি কাউন্টার অ্যাপ্লিকেশন আছে এবং আমরা Redux ব্যবহার করে স্টেট ম্যানেজ করবো।

1. Redux Store তৈরি এবং কনফিগার করা

প্রথমে আমাদের একটি স্লাইস তৈরি করতে হবে যেটি কাউন্টার স্টেট পরিচালনা করবে।

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    }
  }
});

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

এখানে:

• createSlice ফাংশনটি ব্যবহার করে কাউন্টার স্টেট তৈরি করা হয়েছে এবং increment এবং decrement অ্যাকশনগুলো সংজ্ঞায়িত করা হয়েছে।

Redux Store তৈরি করা:

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

export default store;

2. Redux Provider দিয়ে অ্যাপ্লিকেশনকে র‍্যাপ করা

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

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

এখানে, store এ আমাদের তৈরি করা Redux স্টোর এবং Provider এর মাধ্যমে এটি পুরো অ্যাপ্লিকেশনকে সরবরাহ করা হয়েছে।

3. useSelector হুক দিয়ে State অ্যাক্সেস করা

useSelector হুক ব্যবহার করে Redux স্টোর থেকে স্টেটের মান অ্যাক্সেস করা যায়। useSelector ফাংশনটি স্টেটের সাবসেট প্রদান করে এবং এই মানটি রেন্ডার করা হয়।

// Counter.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './counterSlice';

function Counter() {
  // useSelector হুক ব্যবহার করে কাউন্টার স্টেট অ্যাক্সেস করা
  const count = useSelector((state) => state.counter.value);

  // useDispatch হুক ব্যবহার করে ডিসপ্যাচ ফাংশন অ্যাক্সেস করা
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default Counter;

এখানে:

• useSelector হুকটি state.counter.value থেকে কাউন্টার স্টেটের মান সংগ্রহ করছে।
• useDispatch হুকটি অ্যাকশন ডিসপ্যাচ করতে ব্যবহৃত হচ্ছে (increment ও decrement অ্যাকশন)।

4. Action Dispatch করা useDispatch হুকের মাধ্যমে

useDispatch হুক Redux স্টোর থেকে ডিসপ্যাচ ফাংশনটি গ্রহণ করে, যা Redux স্টেটে পরিবর্তন আনার জন্য ব্যবহৃত হয়।

উপরের Counter কম্পোনেন্টে, দুটি বাটন ক্লিক করলে increment এবং decrement অ্যাকশন ডিসপ্যাচ হবে এবং স্টেট আপডেট হবে।

Full Example কোড:

// counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    }
  }
});

export const { increment, decrement } = counterSlice.actions;

export default counterSlice.reducer;

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

export default store;

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

function App() {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
}

export default App;

// Counter.js
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { increment, decrement } from './counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
}

export default Counter;

সারাংশ

Redux ব্যবহারের মাধ্যমে React-এ স্টেট ম্যানেজমেন্ট অনেক সহজ এবং কার্যকরী হয়ে ওঠে। useSelector এবং useDispatch হুকগুলোর মাধ্যমে functional components এর মধ্যে Redux স্টোরের স্টেট অ্যাক্সেস এবং অ্যাকশন ডিসপ্যাচ করা খুবই সোজা। Provider কম্পোনেন্টের মাধ্যমে স্টোর পুরো অ্যাপ্লিকেশনকে সরবরাহ করা হয়। Redux স্টোর এবং স্লাইস ব্যবহারের মাধ্যমে অ্যাসিনক্রোনাস বা সিঙ্ক্রোনাস স্টেট ম্যানেজমেন্ট দক্ষতার সাথে করা যায়।