ஆய்வு 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

ஒத்திசைவு பயன்பாட்டுடன் வரையறுத்து 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. நிஜ-உலக பயன்பாட்டில், உங்கள் திட்டப்பணியின் குறிப்பிட்ட தேவைகளைப் பூர்த்தி செய்ய நீங்கள் பலவற்றைக் கருத்தில் கொண்டு தனிப்பயனாக்க வேண்டியிருக்கலாம்.