Eksplorimi Redux DevTools dhe Udhëtimi në Kohë në Next.js

Redux DevTools

Redux DevTools është një extension mjet shfletuesi që ju ndihmon të gjurmoni dhe korrigjoni Redux Store më lehtë. Ai siguron një ndërfaqe për të parë historinë actions dhe gjendjet, si dhe ju lejon të lundroni dhe të shihni ndryshimet me Redux Store kalimin e kohës. Kjo ju ndihmon të kuptoni se si ndryshon gjendja e aplikacionit kur actions ndodh.

Për t'u integruar Redux DevTools në një Next.js aplikacion, mund të përdorni redux-devtools-extension bibliotekën. Këtu është një shembull se si ta integroni atë:

Instaloni Redux DevTools Extension:

npm install redux-devtools-extension

Përdorni Redux DevTools Extension kur krijoni 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;  

Kur hapni Redux DevTools në shfletuesin tuaj, do të shihni një skedë të re për të gjurmuar gjendjen dhe actions të Redux Store.

Udhëtimi në kohë në Redux

Udhëtimi në kohë në Redux i referohet aftësisë për të lundruar mbrapa dhe mbrapa midis shteteve të Redux Store për të gjurmuar ndryshimet në gjendje përmes actions. Kur kombinohet me Redux DevTools, udhëtimi në kohë ju mundëson të vëzhgoni në mënyrë specifike se si Redux Store ndryshon gjendja e tij me kalimin e kohës.

Të avancuara Routing dhe Redux integrimi në Next.js

Për t'u integruar në të avancuara routing dhe Redux në Next.js, mund të ndiqni këto hapa:

Instaloni bibliotekat react-router-dom dhe redux-thunk :

npm install react-router-dom redux-thunk

Përcaktoni Redux Thunk Middleware dhe krijoni Actions me përdorimin e asinkronizuar :

// 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 për Routing dhe të dhëna :

// 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,  
});  

Krijoni Router dhe përdorni Redux në Next.js faqe :

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

Përdorni Router dhe Redux në Next.js Faqe :

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

Ju lutemi vini re se ky është një shembull relativisht i thjeshtë se si të integrohen Redux dhe routing në Next.js. Në një aplikacion të botës reale, mund t'ju duhet të merrni parasysh dhe të personalizoni më shumë për të përmbushur kërkesat specifike të projektit tuaj.