탐험 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

의 시간 여행은 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 });  
  }  
};  

데이터 Reducers 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. 실제 애플리케이션에서는 프로젝트의 특정 요구 사항을 충족하기 위해 더 많은 것을 고려하고 사용자 정의해야 할 수도 있습니다.