Tyrinėjimas Redux DevTools ir kelionės laiku Next.js

Redux DevTools

Redux DevTools yra naršyklės extension įrankis, padedantis Redux Store lengviau sekti ir derinti. Tai suteikia sąsają, skirtą peržiūrėti istoriją actions ir būsenas, taip pat leidžia naršyti ir matyti pokyčius laikui bėgant Redux Store. Tai padeda suprasti, kaip programos būsena pasikeičia įvykus actions.

Norėdami integruoti Redux DevTools į Next.js programą, galite naudoti redux-devtools-extension biblioteką. Štai pavyzdys, kaip jį integruoti:

Įdiegti Redux DevTools Extension:

npm install redux-devtools-extension

Redux DevTools Extension Kurdami naudokite 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;  

Kai atidarysite Redux DevTools naršyklėje, pamatysite naują skirtuką, kad galėtumėte stebėti būseną actions ir Redux Store.

Kelionė laiku Redux

Kelionė laiku reiškia Redux galimybę naršyti pirmyn ir atgal tarp būsenų, kad būtų Redux Store galima stebėti būsenos pokyčius per actions. Kai kartu su Redux DevTools, kelionės laiku leidžia konkrečiai stebėti, kaip Redux Store laikui bėgant keičiasi būsena.

Išplėstinė Routing ir Redux integracija Next.js

Norėdami integruoti išplėstinius routing ir Redux į Next.js, galite atlikti šiuos veiksmus:

Įdiekite react-router-dom ir redux-thunk bibliotekas :

npm install react-router-dom redux-thunk

Apibrėžkite Redux Thunk Middleware ir sukurkite Actions naudojant async naudojimą :

// 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 ir duomenys :

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

Sukurti Router Redux Next.js ir naudoti puslapyje :

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

Naudoti Router ir Redux puslapyje 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;  

Atminkite, kad tai gana paprastas pavyzdys, kaip integruoti Redux ir routing į Next.js. Realioje programoje gali tekti apsvarstyti ir pritaikyti daugiau, kad atitiktumėte konkrečius projekto reikalavimus.