ਵਿੱਚ ਖੋਜ 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 ਇੱਕ ਅਸਲ-ਸੰਸਾਰ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਖਾਸ ਲੋੜਾਂ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਹੋਰ ਵਿਚਾਰ ਕਰਨ ਅਤੇ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦੀ ਲੋੜ ਹੋ ਸਕਦੀ ਹੈ।