Reactにおける状態永続化のベストプラクティス：ローカルストレージ、Redux、その他

2024-05-23

React.js でページ更新後の状態を維持する方法

状態を維持するには、主に以下の2つの方法があります。

ローカルストレージは、ブラウザにデータを保存するためのAPIです。

以下の手順で、React.jsコンポーネントでローカルストレージを使用して状態を保存できます。

useStateフックを使用して、コンポーネントの状態を管理します。
useEffectフックを使用して、コンポーネントがマウントされたときに、ローカルストレージから状態をロードします。
useStateフックを使用して更新された状態を保存し、ローカルストレージに保存します。

例:

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const storedData = localStorage.getItem('myData');
    if (storedData) {
      setData(JSON.parse(storedData));
    }
  }, []);

  const handleChange = (event) => {
    const newData = [...data];
    newData[event.target.id] = event.target.value;
    setData(newData);
  };

  useEffect(() => {
    localStorage.setItem('myData', JSON.stringify(data));
  }, [data]);

  return (
    <div>
      {data.map((value, id) => (
        <input
          key={id}
          id={id}
          value={value}
          onChange={handleChange}
        />
      ))}
    </div>
  );
}

Reduxは、アプリケーションの状態を管理するためのステートマネジメントライブラリです。

Reduxストアを作成します。
Reducerを作成して、アクションに応じた状態の更新を処理します。
Reactコンポーネントを connect関数を使用してストアに接続します。
useDispatchフックを使用してアクションをディスパッチします。

import React from 'react';
import { connect } from 'react-redux';
import { useDispatch } from 'react-redux';

const store = createStore(reducer);

function MyComponent(props) {
  const dispatch = useDispatch();

  const handleChange = (event) => {
    dispatch({ type: 'UPDATE_DATA', data: event.target.value });
  };

  return (
    <div>
      <input value={props.data} onChange={handleChange} />
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    data: state.data,
  };
};

export default connect(mapStateToProps)(MyComponent);

ローカルストレージとReduxのどちらを選択するかは、アプリケーションの要件によって異なります。

ローカルストレージ:
- 小規模なアプリケーションに適しています。
- コンポーネントレベルで状態を管理する必要がある場合に適しています。

その他の考慮事項

状態を保存する前に、データをシリアル化して保存する必要があります。
敏感なデータを保存する場合は、セキュリティ対策を講じる必要があります。

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const storedCount = localStorage.getItem('myCount');
    if (storedCount) {
      setCount(parseInt(storedCount));
    }
  }, []);

  const increment = () => {
    setCount(count + 1);
  };

  useEffect(() => {
    localStorage.setItem('myCount', count);
  }, [count]);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={increment}>インクリメント</button>
    </div>
  );
}

export default MyComponent;

説明

このコードは、countというステート変数を定義します。
increment 関数は count の値を1増やし、新しい値をローカルストレージに保存します。

このコードを実行すると、ページを更新してもカウント数が維持されます。

フォームに入力されたデータを保存する
ユーザー設定を保存する
ショッピングカートのアイテムを保存する

注意事項

ローカルストレージはブラウザごとに保存されます。
異なるブラウザで同じ状態にアクセスするには、同期メカニズムを実装する必要があります。

React.jsでページ更新後の状態を維持するその他の方法

Context APIは、React 16.8で導入された、コンポーネント間で状態を共有するためのAPIです。グローバルな状態管理に適しており、Reduxよりもシンプルで軽量なソリューションを求めている場合に役立ちます。

実装方法:

createContextフックを使用して、Contextを作成します。
Providerコンポーネントを作成し、共有する状態を値として渡します。
コンシューマーコンポーネントを使用して、Context内の状態にアクセスします。

import React, { createContext, useState } from 'react';

const MyContext = createContext({ count: 0 });

function Provider(props) {
  const [count, setCount] = useState(0);

  return (
    <MyContext.Provider value={{ count, setCount }}>
      {props.children}
    </MyContext.Provider>
  );
}

function Consumer() {
  const { count, setCount } = useContext(MyContext);

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>インクリメント</button>
    </div>
  );
}

function App() {
  return (
    <Provider>
      <Consumer />
    </Provider>
  );
}

利点:

シンプルで使いやすい
Reduxよりも軽量
グローバルな状態管理に適している

スケーリングが難しい
状態の変更を追跡するのが難しい

React Queryは、APIリクエストをキャッシュおよび管理するためのライブラリです。 APIから取得したデータを永続化することで、ページ更新後も状態を維持することができます。

useQueryフックを使用して、APIリクエストを実行します。
キャッシュされたデータをコンポーネント内で使用します。

import React, { useQuery, useMutation } from 'react-query';

function MyComponent() {
  const { data, isLoading, error } = useQuery('todos', fetchTodos);

  const addTodo = useMutation(createTodo);

  if (isLoading) {
    return <div>読み込み中...</div>;
  }

  if (error) {
    return <div>エラーが発生しました: {error.message}</div>;
  }

  return (
    <div>
      {data.todos.map((todo) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
      <button onClick={() => addTodo({ title: '新しいタスク' })}>タスクを追加</button>
    </div>
  );
}

APIリクエストのキャッシュと管理を容易にする
コードを簡潔にする
オフラインサポートを提供する

複雑なセットアップが必要
学習曲線が大きい

Zustandは、シンプルで使いやすいステートマネジメントライブラリです。 MobXと似ていますが、より軽量で、React Hooksとの統合が優れています。

createStore関数を使用して、ストアを作成します。
ストア内の状態にアクセスして更新するには、useStoreフックを使用します。

import React, { useState } from 'react';
import create from 'zustand';

const store = create(state => ({
  count: 0,
  increment() {
    state.count += 1;
  },
}));

function MyComponent() {
  const count = store.getState().count;
  const increment = store.getState().increment;

  return (
    <div>
      <p>カウント: {count}</p>
      <button onClick={increment}>インクリメント</button>
    </div>
  );
}