close

における状態および動的データ管理 Next.js

インタラクティブで応答性の高いアプリケーションを作成するには、状態と動的データを効果的に管理することが不可欠です。 React State この記事では、 と エフェクトを使用してアプリケーションの状態と対話型操作を管理する 方法を説明します Next.js。 さらに、MobX などの状態管理ライブラリを統合して、複雑な状態管理シナリオを処理する方法を学習します Redux。

使い方 React State と効果

React State およびエフェクトは、コンポーネント内のローカル状態を管理し、データのフェッチや DOM 操作などの副作用を実行するための強力なツールです。 コンポーネント内で React State と を 使用する基本的な例を見てみましょう 。 Effect Next.js 

import React, { useState, useEffect } from 'react';  
  
function Counter() {  
  const [count, setCount] = useState(0);  
  
  useEffect(() => {  
    document.title = `Count: ${count}`;  
  }, [count]);  
  
  return( 
    <div>  
      <p>Count: {count}</p>  
      <button onClick={() => setCount(count + 1)}>Increase</button>  
    </div>  
 );  
}  
  
export default Counter;

上記の例では、状態 useState を管理し count、 useEffect ドキュメントのタイトルが count 変更されるたびに更新するために を使用しています。

統合 Redux またはMobX

より複雑な状態管理シナリオの場合、 または MobX などのライブラリを統合すると、 Redux アプリケーション全体で状態を管理する集中的かつ組織的な方法が提供されます。 Redux アプリケーションへの 統合に関する高レベルのガイドは次のとおりです Next.js。

必要なパッケージをインストールします。 

npm install redux react-redux  
# or  
yarn add redux react-redux

Redux 必要に応じてストア、リデューサー、アクションを 作成します。

ファイル内で Next.js App コンポーネントを で ラップします 。 Redux Provider pages/_app.js 

import { Provider } from 'react-redux';  
import { store } from '../redux/store'; // Import your Redux store  
  
function MyApp({ Component, pageProps }) {  
  return( 
    <Provider store={store}>  
      <Component {...pageProps} />  
    </Provider>  
 );  
}  
  
export default MyApp;

結論

Next.js このセクションでは、 と エフェクトを使用してアプリケーション 内の状態と動的データを効果的に管理する方法を学習しました React State。 Redux また、より複雑な状態管理シナリオのために MobX などの 状態管理ライブラリを統合する概念についても説明しました。 これらのテクニックにより、洗練された応答性の高いアプリケーションを で構築できるようになります Next.js。