close

კვლევა 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

დროში მოგზაურობა in 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 });  
  }  
};

reate Reducers for 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