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

のタイムトラベル とは、の状態間を行き来して、 の 状態の変化を追跡する Redux 機能を指します 。 タイムトラベルをと組み合わせると 、時間の経過とともに の状態がどのように変化するかを具体的に観察できます 。 Redux Store actions Redux DevTools Redux Store

高度な機能 Routing と Redux 統合 Next.js

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

Page で 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。 実際のアプリケーションでは、プロジェクトの特定の要件を満たすために、さらに考慮してカスタマイズする必要がある場合があります。