close

Bincika Redux DevTools da Tafiya Lokaci a ciki Next.js

Redux DevTools

Redux DevTools kayan aiki ne na burauza extension wanda ke taimaka muku waƙa da cire kuskure Redux Store cikin sauƙi. Yana ba da hanyar dubawa don duba tarihin actions da jihohi, haka kuma yana ba ku damar kewayawa da ganin canje-canje a cikin Redux Store lokaci. Wannan yana taimaka muku fahimtar yadda yanayin aikace-aikacen ke canzawa idan actions ya faru.

Don haɗawa Redux DevTools cikin Next.js aikace-aikacen, zaku iya amfani da redux-devtools-extension ɗakin karatu. Ga misalin yadda ake haɗa shi:

Shigar Redux DevTools Extension:

npm install redux-devtools-extension

Yi amfani Redux DevTools Extension lokacin ƙirƙirar 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;

Lokacin da ka buɗe Redux DevTools a cikin burauzarka, za ka ga sabon shafin don bin yanayin jihar da actions na Redux Store.

Lokacin Tafiya Redux

Balaguron lokaci a cikin Redux yana nufin ikon kewayawa baya da gaba tsakanin jihohin don Redux Store bin sauye-sauye a cikin jihar ta hanyar actions. Lokacin da aka haɗa shi da Redux DevTools, tafiye-tafiyen lokaci yana ba ku damar lura da yadda Redux Store jihar ke canzawa akan lokaci.

Advanced Routing and Redux Integration in Next.js

Don haɗa ci gaba routing da Redux ciki Next.js, kuna iya bin waɗannan matakan:

Shigar react-router-dom da redux-thunk dakunan karatu :

npm install react-router-dom redux-thunk

Ƙirƙiri Redux Thunk Middleware kuma Ƙirƙiri Actions tare da Amfanin 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 });  
  }  
};

karanta Reducers kuma Routing 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,  
});

Ƙirƙiri Router da Amfani Redux a cikin Next.js Shafi :

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

Amfani Router da kuma Redux a cikin Next.js Page :

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

Lura cewa wannan misali ne mai sauƙi na yadda ake haɗawa Redux da routing cikin Next.js. A cikin aikace-aikacen duniyar gaske, ƙila kuna buƙatar yin la'akari da keɓance ƙarin don biyan takamaiman buƙatun aikin ku.