ایکسپلورنگ 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 اور ڈیٹا :

// 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