Meneroka Redux DevTools dan Perjalanan Masa di Next.js

Redux DevTools

Redux DevTools ialah extension alat penyemak imbas yang membantu anda menjejak dan nyahpepijat Redux Store dengan lebih mudah. Ia menyediakan antara muka untuk melihat sejarah actions dan keadaan, serta membolehkan anda menavigasi dan melihat perubahan dari Redux Store semasa ke semasa. Ini membantu anda memahami bagaimana keadaan aplikasi berubah apabila actions berlaku.

Untuk menyepadukan Redux DevTools ke dalam Next.js aplikasi, anda boleh menggunakan redux-devtools-extension perpustakaan. Berikut ialah contoh cara mengintegrasikannya:

Pasang Redux DevTools Extension:

npm install redux-devtools-extension

Gunakan Redux DevTools Extension semasa membuat 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;  

Apabila anda membuka Redux DevTools dalam penyemak imbas anda, anda akan melihat tab baharu untuk menjejaki keadaan actions dan Redux Store.

Perjalanan Masa dalam Redux

Perjalanan Masa dalam Redux merujuk kepada keupayaan untuk menavigasi ulang alik antara keadaan untuk Redux Store mengesan perubahan dalam keadaan melalui actions. Apabila digabungkan dengan Redux DevTools, perjalanan masa membolehkan anda memerhati secara khusus bagaimana Redux Store keadaan berubah dari semasa ke semasa.

Lanjutan Routing dan Redux Integrasi dalam Next.js

Untuk menyepadukan lanjutan routing dan Redux dalam Next.js, anda boleh mengikuti langkah berikut:

Pasang react-router-dom dan redux-thunk perpustakaan :

npm install react-router-dom redux-thunk

Tentukan Redux Thunk Middleware dan Cipta Actions dengan Penggunaan Async :

// 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 untuk Routing dan Data :

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

Buat Router dan Gunakan Redux dalam Next.js Halaman :

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

Gunakan Router dan Redux dalam Next.js Halaman :

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

Sila ambil perhatian bahawa ini adalah contoh yang agak mudah tentang cara menyepadukan Redux dan routing dalam Next.js. Dalam aplikasi dunia sebenar, anda mungkin perlu mempertimbangkan dan menyesuaikan lebih banyak lagi untuk memenuhi keperluan khusus projek anda.