Redux Toolkit ব্যবহার করে Store এবং Reducer তৈরি করা

Redux Toolkit (RTK) হল Redux-এর অফিসিয়াল এবং সবচেয়ে সুপারিশকৃত লাইব্রেরি, যা Redux-এর স্টোর এবং রিডিউসার তৈরি করার প্রক্রিয়া সহজ এবং কার্যকরী করে তোলে। এটি Redux-এর সাধারণ ব্যবহারের জন্য একটি রেফারেন্স ইমপ্লিমেন্টেশন এবং ব্যবহারকারীর কোড লেখার সময় অনেক কিছু অটোমেটিক্যালি হ্যান্ডেল করে।

Redux Toolkit ব্যবহার করলে আপনার অ্যাপ্লিকেশনকে আরও কম্প্যাক্ট, শক্তিশালী এবং সহজে পরিচালনা করা যায়। এটি স্টোর, রিডিউসার, অ্যাকশন ক্রিয়েটর এবং অন্যান্য স্টেট ম্যানেজমেন্ট ফিচারগুলোকে একত্রিত করে।

Redux Toolkit এর সুবিধাসমূহ

1. সহজ কনফিগারেশন: স্টোর তৈরি এবং কনফিগারেশন অনেক সহজ।
2. বিকল্পভাবে একাধিক রিডিউসার ব্যবহারের সুবিধা: combineReducers ব্যবহার না করে, একাধিক রিডিউসারকে একত্রিত করা যায়।
3. ব্লট-কোড কমানো: Reducer এবং Action Creators অনেক কম কোডে তৈরি করা যায়।
4. অটোমেটিক থঙ্ক সাপোর্ট: Redux Toolkit থঙ্ক সাপোর্ট করে, যা অ্যাসিনক্রোনাস অ্যাকশন পরিচালনা করতে সাহায্য করে।

Redux Toolkit ব্যবহার করে Store এবং Reducer তৈরি করার প্রক্রিয়া

স্টেপ ১: Redux Toolkit ইনস্টল করা

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

npm install @reduxjs/toolkit react-redux

স্টেপ ২: Slice তৈরি করা

Redux Toolkit-এর মূল ধারণা হল slice। Slice হলো একটি Redux স্টেটের টুকরা এবং এর সাথে সংশ্লিষ্ট রিডিউসার, অ্যাকশন ক্রিয়েটরসহ সমস্ত কোড একত্রিত থাকে।

Redux Toolkit-এর createSlice ফাংশন ব্যবহার করে slice তৈরি করা যায়। এটি রিডিউসার এবং অ্যাকশন ক্রিয়েটর উভয়কে একত্রিত করে।

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

// Initial state
const initialState = {
  counter: 0
};

// Slice creation using createSlice
const counterSlice = createSlice({
  name: 'counter', // Slice name
  initialState, // Initial state
  reducers: {
    increment: (state) => {
      state.counter += 1;
    },
    decrement: (state) => {
      state.counter -= 1;
    },
    incrementByAmount: (state, action) => {
      state.counter += action.payload;
    }
  }
});

// Exporting the actions
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// Exporting the reducer
export default counterSlice.reducer;

এখানে:

• createSlice দিয়ে একটি slice তৈরি করা হয়েছে, যেখানে name, initialState, এবং reducers ফিল্ডগুলো রয়েছে।
• increment, decrement, এবং incrementByAmount তিনটি অ্যাকশন তৈরি করা হয়েছে যেগুলো স্টেট পরিবর্তন করবে।

স্টেপ ৩: Store তৈরি করা

Redux Toolkit-এ স্টোর তৈরি করার জন্য configureStore ব্যবহার করা হয়, যা স্টোর কনফিগারেশন অনেক সহজ করে দেয়।

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

// Store creation
const store = configureStore({
  reducer: {
    counter: counterReducer, // Register the slice reducer
  }
});

export default store;

এখানে:

• configureStore দিয়ে স্টোর তৈরি করা হয়েছে এবং এতে counterReducer পাস করা হয়েছে, যা counter slice-এ সংরক্ষিত স্টেটের জন্য ব্যবহৃত হবে।

স্টেপ ৪: React অ্যাপে Store প্রদান করা

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

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

// Wrapping the app in the Provider and passing the store
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

এখানে:

• Provider কম্পোনেন্টটি স্টোরটি অ্যাপ্লিকেশনের সমস্ত কম্পোনেন্টে প্রদান করবে, যাতে কম্পোনেন্টগুলো Redux স্টেট অ্যাক্সেস করতে পারে।

স্টেপ ৫: Store থেকে স্টেট গ্রহণ করা এবং Action Dispatch করা

React কম্পোনেন্টে Redux স্টেট ব্যবহারের জন্য useSelector এবং useDispatch হুক ব্যবহার করা হয়।

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

function App() {
  const counter = useSelector((state) => state.counter.counter); // Accessing the counter state
  const dispatch = useDispatch(); // Dispatch function

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

export default App;

এখানে:

• useSelector ব্যবহার করে স্টোর থেকে counter স্টেট নেয়া হয়েছে।
• useDispatch ব্যবহার করে অ্যাকশন ডিসপ্যাচ করা হয়েছে, যেমন increment, decrement, এবং incrementByAmount।

সারাংশ

Redux Toolkit ব্যবহার করে স্টোর এবং রিডিউসার তৈরি করা খুবই সহজ এবং কার্যকরী। createSlice ফাংশন দিয়ে একটি slice তৈরি করা হয়, যেখানে রিডিউসার এবং অ্যাকশন একত্রিত থাকে। তারপর configureStore ফাংশন দিয়ে স্টোর তৈরি করা হয় এবং এটি অ্যাপ্লিকেশনে প্রদান করার জন্য Provider কম্পোনেন্ট ব্যবহার করা হয়। React কম্পোনেন্টে স্টেট অ্যাক্সেস এবং অ্যাকশন ডিসপ্যাচ করার জন্য useSelector এবং useDispatch হুক ব্যবহার করা হয়। Redux Toolkit-এ এই সমস্ত কাজগুলি খুব কম কোডে করা যায়, ফলে Redux ব্যবহারে অনেক সুবিধা পাওয়া যায়।