React অ্যাপ্লিকেশনে Redux এবং RTK ইনস্টলেশন

এই সেশনে আমরা আমাদের অ্যাপ্লিকেশনে React-Redux প্যাকেজ ইনস্টল করব, যা React কম্পোনেন্টগুলিকে Redux এর সাথে সংযুক্ত করতে দেয় এবং Redux Toolkit (সংক্ষেপে RTK) টুলটি।

আমাদের প্রোজেক্টটি খুলি এবং টার্মিনালে নিম্নলিখিত কমান্ডটি টাইপ করি:

npm install @reduxjs/toolkit react-redux

এখন আমাদের একটি store তৈরি করতে হবে, যেখানে আমাদের অ্যাপ্লিকেশনের গ্লোবাল স্টেট সংরক্ষণ করা হবে। শুরুতে src ফোল্ডারে আমরা একটি app ফোল্ডার তৈরি করব, এবং সেখানে একটি store.js ফাইল তৈরি করব। তারপর এই ফাইলে আমাদের RTK থেকে configureStore ইম্পোর্ট করতে হবে:

import { configureStore } from '@reduxjs/toolkit'

এরপর একটি খালি store তৈরি করি এবং এটিতে অন্তত একটি reducer পাস করি:

export default configureStore({
	reducer: {}
});

যাতে আমাদের React কম্পোনেন্টগুলি store এর সাথে কাজ করতে পারে, তার জন্য আমরা নিম্নলিখিত কাজটি করব। আমাদের main.jsx ফাইলটি খুলি, যেখানে ইতিমধ্যেই কোড রয়েছে:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
)

ইম্পোর্টে আমরা আগের ধাপে তৈরি করা store এবং Provider কম্পোনেন্টটি যোগ করব:

import store from './app/store'
import { Provider } from 'react-redux'

তারপর আমাদের মূল কম্পোনেন্ট App কে Provider দ্বারা wrap করব, এবং এটিকে prop হিসেবে store পাস করব:

<React.StrictMode>
	<Provider store={store}>
		<App />
	</Provider>
</React.StrictMode>

এবং, অবশেষে, মূল React কম্পোনেন্ট App এ নিম্নলিখিত কোডটি রাখব:

function App() {
	return <h2>This is my first Redux app!</h2>
}

export default App

আমাদের প্রোজেক্টটি আবার চালু করি এবং ব্রাউজার উইন্ডোতে দেখি: 'This is my first Redux app!'। বৈধ reducer না থাকার ওয়ার্নিং এ আপাতত মনোযোগ দেব না। আপনি সফল হয়েছেন, অভিনন্দন :).

আপনার অ্যাপ্লিকেশনে পাঠে বর্ণিত অনুযায়ী Redux এবং RTK ইনস্টল করুন। নিশ্চিত করুন যে আপনার অ্যাপ্লিকেশন কাজ করছে।