অন্বেষণ Redux DevTools এবং সময় ভ্রমণ ইন Next.js

Redux DevTools

Redux DevTools একটি ব্রাউজার extension টুল যা আপনাকে Redux Store আরও সহজে ট্র্যাক এবং ডিবাগ করতে সাহায্য করে৷ এটি ইতিহাস actions এবং রাজ্যগুলি দেখার জন্য একটি ইন্টারফেস প্রদান করে, সেইসাথে আপনাকে নেভিগেট করতে এবং Redux Store সময়ের সাথে সাথে পরিবর্তনগুলি দেখতে দেয়। এটি আপনাকে বুঝতে সাহায্য করে যে কীভাবে অ্যাপ্লিকেশনের অবস্থার পরিবর্তন হয় actions ।

Redux DevTools একটি অ্যাপ্লিকেশনে সংহত করতে Next.js, আপনি redux-devtools-extension লাইব্রেরি ব্যবহার করতে পারেন। এটি কীভাবে সংহত করা যায় তার একটি উদাহরণ এখানে রয়েছে:

ইনস্টল করুন Redux DevTools Extension:

npm install redux-devtools-extension

Redux DevTools Extension তৈরি করার সময় ব্যবহার করুন Redux Store:

// store/index.js  
import { createStore } from 'redux';  
import { composeWithDevTools } from 'redux-devtools-extension';  
import counterReducer from './reducers';  
  
const store = createStore(counterReducer, composeWithDevTools());  
  
export default store;  

আপনি যখন আপনার ব্রাউজারে খুলবেন Redux DevTools, তখন আপনি একটি নতুন ট্যাব দেখতে পাবেন যার অবস্থা এবং ট্র্যাক actions করতে Redux Store ।

টাইম ট্রাভেল ইন Redux

টাইম ট্রাভেল ইন এর মাধ্যমে রাজ্যের পরিবর্তনগুলি ট্র্যাক করার জন্য Redux রাজ্যগুলির মধ্যে সামনে পিছনে নেভিগেট করার ক্ষমতা বোঝায় । যখন এর সাথে মিলিত হয়, সময় ভ্রমণ আপনাকে বিশেষভাবে পর্যবেক্ষণ করতে সক্ষম করে যে সময়ের সাথে সাথে এর অবস্থা কীভাবে পরিবর্তিত হয়। Redux Store actions Redux DevTools Redux Store

উন্নত Routing এবং Redux ইন্টিগ্রেশন ইন Next.js

routing উন্নত এবং Redux এর মধ্যে সংহত করতে Next.js, আপনি এই পদক্ষেপগুলি অনুসরণ করতে পারেন:

react-router-dom এবং redux-thunk লাইব্রেরি ইনস্টল করুন :

npm install react-router-dom redux-thunk

Async ব্যবহারের সাথে সংজ্ঞায়িত করুন Redux Thunk Middleware এবং তৈরি করুন Actions :

// store/middleware.js  
import thunk from 'redux-thunk';  
  
const middleware = [thunk];  
  
export default middleware;  

// store/actions.js  
export const fetchData =() => async(dispatch) => {  
  try {  
    dispatch({ type: 'FETCH_DATA_REQUEST' });  
    const response = await fetch('your_api_endpoint');  
    const data = await response.json();  
    dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });  
  } catch(error) {  
    dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });  
  }  
};  

reate Reducers for Routing and Data :

// store/reducers.js  
const initialState = {  
  // ...initial state  
};  
  
const routingReducer =(state = initialState, action) => {  
  // handle routing-related actions  
};  
  
const dataReducer =(state = initialState, action) => {  
  // handle data-related actions  
};  
  
export default combineReducers({  
  routing: routingReducer,  
  data: dataReducer,  
});  

পৃষ্ঠা তৈরি করুন Router Redux Next.js এবং ব্যবহার করুন :

// pages/_app.js  
import { Provider } from 'react-redux';  
import { BrowserRouter as Router } from 'react-router-dom';  
import store from '../store';  
  
function MyApp({ Component, pageProps }) {  
  return( 
    <Provider store={store}>  
      <Router>  
        <Component {...pageProps} />  
      </Router>  
    </Provider>  
 );  
}  
  
export default MyApp;  

ব্যবহার Router Redux Next.js করুন এবং পৃষ্ঠায় :

// pages/index.js  
import { useSelector, useDispatch } from 'react-redux';  
import { fetchData } from '../store/actions';  
  
function HomePage() {  
  const data = useSelector(state => state.data);  
  const dispatch = useDispatch();  
  
  return( 
    <div>  
      <h1>Advanced Routing and Redux Integration</h1>  
      <button onClick={() => dispatch(fetchData())}>Fetch Data</button>  
      <pre>{JSON.stringify(data, null, 2)}</pre>  
    </div>  
 );  
}  
  
export default HomePage;  

Redux অনুগ্রহ করে মনে রাখবেন যে এটি কিভাবে একীভূত করা routing যায় তার একটি তুলনামূলকভাবে সহজ উদাহরণ Next.js । একটি বাস্তব-বিশ্বের অ্যাপ্লিকেশনে, আপনার প্রকল্পের নির্দিষ্ট প্রয়োজনীয়তাগুলি পূরণ করার জন্য আপনাকে আরও বিবেচনা এবং কাস্টমাইজ করতে হবে।