अन्वेषण 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 });  
  }  
};  

Reducers को लागी 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 । वास्तविक-विश्व अनुप्रयोगमा, तपाईंले आफ्नो परियोजनाको विशेष आवश्यकताहरू पूरा गर्न थप विचार र अनुकूलन गर्न आवश्यक पर्दछ।