deve.K

エンジニアが未来を切り開く。

English

Next.js 入門 状態管理をする簡単な方法


スポンサーリンク

f:id:dev04K:20220113140927j:plain

Reactアプリで状態を管理をしていくのに常に『Redux』が必要なわけではありません。

それはご存知の方もいらっしゃるかと思います。

『Next.js』でのアプリケーション全体で状態を管理したい場合にそれを行う最も簡単な方法は『ReactContext』を使用する事です。

これはReactライブラリの一部であるため、追加の依存関係をインストールする必要がありません。

その方法を本日は初学者様に紹介致します。

『Context』に精通されていない方はこちらで学ばれてみて下さい。

dev-k.hatenablog.com

Next.jsでReact Contextを使用する

まずは『src』フォルダを作成しその直下に『context』フォルダを作成しますファイル名は『state.js』としときます。

src/context
     ├ state.js

Contextオブジェクトをビルドする為のコードを追加していきます。

import { createContext, useContext } from 'react';

const MyContext = createContext();

export function MyProvider({ children }) {
    const sharedState = { }

    return (
<MyContext.Provider value={sharedState}>
            {children}
        </MyContext.Provider>
    );
}

export function useMyContext() {
    return useContext(MyContext);
}

アプリケーションのすべてのページで『Context』を使用するには、既存の『pages/app.js』に移動し下記のように記述します。

import '../styles/globals.css'
import { MyProvider } from './src/context/state';
//読み込む

function MyApp({ Component, pageProps }) {
  return (
<MyProvider>//ラップする
  <Component {...pageProps} />
</MyProvider> )
}

export default MyApp

『MyProvider』のグローバル定義で『app.js』コンポーネントをラップします。

これで貴方のアプリケーションのすべてのサブコンポーネントとページ間を移動し、コールバックURLに移動する際に、ルーティングの一貫性が維持されます。

その『sharedState』オブジェクト内の値にアクセスしたい場合は、『useMyContext』フックを任意のファイルでインポートして呼び出す事が可能となります。

インポートして呼び出し

先程の『state.js』ファイルに移動しオブジェクト『sharedState』内のデータを用意します。

export function MyProvider({ children }) {

    const sharedState = { 
        number: 123,
        text: "test"
};

任意のファイルまたは既存の『index.js』ファイルでインポートしてコンソールで確認してみて下さい。

import {useMyContext} from './src/context/state'

console.log(useMyContext());

f:id:dev04K:20220113011909j:plain

これで、Next.jsアプリケーションのすべてのコンポーネントとページで『useMyContext()』のカスタムフックで作成した、コンテキストで共有されている状態にアクセスが可能となりました。

特定のコンポーネント間でページを共有できる場合は、ページ間で不要な再レンダリングを行う必要はありません。

最後に

一般的なユースケースの大部分では、『Context・State・Reducer』の組み合わせで十分に補えます。

ですがこれらはあくまでも、Next.jsのコンポーネント間で簡単に状態管理をしていく為であり最善の方法というわけではありません。

特定のコンポーネント間でページ共有の際は不要な再レンダリングを行う必要はないとおっしゃいましたが

1つの『Context』で複数の状態が定義されている場合、パフォーマンスの問題が発生する可能性があります。

それはReactが状態の更新を確認した際に、必要なすべての再レンダリングをDOMに行うためそのような問題が発生致します。

その状態が多くのコンポーネント間で共有されている場合は、不要な再レンダリングが発生する可能性があります、これは非常に望ましくありません。

ですのでコンポーネント間で共有する『状態変数』に注意しながら扱うようにして下さい。

状態共有を整理し沢山の状態を保持するために複数の『Context』を作成することです。

その方法もまたご紹介致します。

本日は以上となります。

最後まで読んで頂きありがとうございます。

プライバシーポリシー