react-js-next-js-swr-redux-toolkit

SWR って、どんな機能があるのかな？

今回は、React.js でデータ取得をシンプルにしてくれるライブラリ SWR について、
基本的な考え方から実際の使い方、さらに Redux Toolkit と組み合わせた実践的なユースケースまでをわかりやすく解説します。

React.js の環境構築がまだの場合は、下記より環境構築を行なってください。

SWR とは？

SWR とは React.js でのデータ取得をシンプルにしてくれる React Hooks ライブラリ のことで、API からデータを取得する ときに発生しがちな 読み込み中の表示 や エラー時の処理、
最新データの取得 といった処理を 自動で行ってくれます。

そのため、useEffect や useState を使った複雑なコードを書かなくても、
少ないコードで直感的かつ安全にデータ取得を実装することができます。

SWR の名前とデータ取得の流れ

SWR という名前は、Stale-While-Revalidate の略で、「古いデータを一旦表示しつつ、裏側で最新のデータを取得する」という考え方を表しています。

SWR では、データ取得が次のような流れで行われます。

最初に、以前取得して キャッシュされているデータを画面に表示 する
同時に、API から 最新のデータを取得 する
最新データが取得 できたら、自動で画面を更新 する

この仕組みによって、表示の速さとデータの新しさ を両立することができ、ユーザーは待ち時間を感じにくく、開発者はデータ更新の処理を意識せずに実装することができます。

SWR のインストールと基本的な使い方

それでは、ここから実際に SWR を インストール したり、コンポーネントで利用する 基本的な流れを見ていきましょう。

SWR のインストール

SWR を インストール します

npm install swr

SWR 基本的な使い方

useSWR

SWR は React でのデータ取得を支援するライブラリのことで、
useSWR は SWR が提供している 実際にデータ取得を行うためのフック です。

// { data: '取得したデータ', error: 'データ取得中の有無', isLoading: 'エラーが発生の有無' } = 
// useSWR('取得したいデータの名前', fetcher: 'データの取得方法', option: '動作オプション' )
const { data, error, isLoading } = useSWR(key, fetcher, option);

コード例

import useSWR from 'swr';

// 引数の URL を受けとって、fetch して json() を返す
const fetcher = (url) => fetch(url).then((res) => res.json());

export default function SwrUserPage() {
  const { data, error, isLoading } = useSWR(
    'https://jsonplaceholder.typicode.com/users/1',
    fetcher,
    {
      // revalidateOnFocus: true, // デフォルト ブラウザのタブに戻ったときに再取得
      // refreshInterval: 5000, // 5秒ごとに自動で再取得 デフォルト: 0 (無効)
    },
  );

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error</p>;

  return (
    <>
      <h2>SWR UserPage</h2>
      {data?.name ? (
        <p>こんにちは {data.name}</p>
      ) : (
        <p>ユーザー情報が取得できません</p>
      )}
    </>
  );
}

処理内容

“こんにちは Leanne Graham” と表示されている
一瞬 “Loading…” の文字が表示され、また “こんにちは Leanne Graham” と 再表示 される

SWR + Redux Toolkit と連携したユースケース

SWR + Redux Toolkit の構成

役割分担

Redux Toolkit と SWR を組み合わせる場合は、それぞれの役割を明確に分けることが重要です。

Redux Toolkit
アプリ全体で共有 したい ログイン情報 や、選択中のデータなどの状態を管理します。
SWR
API からの データ取得やキャッシュ、自動更新の処理を管理 し、常に最新のデータ を扱います。
mutate
SWR が 保持しているキャッシュを最新の状態に更新するため に使用します。
Redux Toolkit の状態 と APIのデータを同期したい場合 に、重要な役割 を持ちます。

メリット

この構成の メリット として、データ更新時の流れが次のように整理されます。

API を呼び出してサーバー側のデータを更新 する
mutate() を使って SWR のキャッシュを更新し、画面を即座に最新化 する
Redux Toolkit に dispatch して、アプリ全体の状態を更新 する

このように、「API更新 → 画面更新 → Redux Toolkit 共有」という流れが明確になるため、状態管理 が複雑になりにくく、安全に実装できます。

mutate とは？

mutate とは、SWR が キャッシュしているデータを手動で更新・再取得するための関数 です。
API でデータを更新したあと に mutate() を呼ぶことで、画面に表示されているデータを最新の状態にできます。

SWR + Redux Toolkit のコード例

Redux Toolkit について

Redux Toolkit について、下記の記事でも詳しく紹介している為、参考にしてみてください。

Slice の作成

ユーザー の 状態（データ）の初期値 や 処理内容 を登録する

import { createSlice } from '@reduxjs/toolkit';

const initialState = { name: '' };

export const swrUserSlice = createSlice({
  name: 'swrUser',
  initialState,
  reducers: {
    setName: (state, action) => {
      state.name = action.payload;
    },
  },
});

export const { setName } = swrUserSlice.actions;

export default swrUserSlice.reducer;

Store に Slice の登録・追加

上記の Slice を呼び出せるように、Store に登録する

// store.js
import { configureStore } from '@reduxjs/toolkit';
import swrUserReducer from './swrUserSlice';

export const store = configureStore({
  reducer: {
    swrUser: swrUserReducer,
  },
});

Provider の設定

上記の Store を アプリ上 で 状態管理 ができるように、Provider を設定する

// main.jsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './index.css';
import App from './App.jsx';
import { Provider } from 'react-redux';
import { store } from './store';

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
);

データの取得・表示・更新

アプリ上 で、状態（データ）の取得・表示・更新 を確認する

処理内容の詳細

API で user.name を ‘taro‘ に 更新処理 を実行
API 更新後の user データを json化 し、ログに表示
SWR の キャッシュを更新 して画面を再表示
今回テスト用の DB が無い為、手動でキャッシュを更新しデータの再検証を無効 にしている
※ 通常 DB がある場合、「mutate();」のコードのみで キャッシュの更新とデータの再取得を自動で行ってくれる
Redux Toolkit の状態も更新

// App.js
import useSWR from 'swr';
import { useDispatch } from 'react-redux';
import { setName } from './swrUserSlice';

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function SwrReduxToolkitUserPage() {
  const dispatch = useDispatch();

  const url = 'https://jsonplaceholder.typicode.com/users/1';

  const { data, mutate } = useSWR(url, fetcher);

  if (!data) return <p>Loading...</p>;

  // user
  async function updateUserName(newName) {
    // ① API 更新
    const updateUser = await fetch(url, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ name: newName }),
    });

    // ② API 更新後の user データをjson化
    const updateUserData = await updateUser.json();
    // ② json化した更新後の user データをログに表示
    console.log('updateUser Name: ', updateUserData.name);

    // ③ SWR キャッシュを更新して画面を再表示
    mutate(
      { name: updateUserData.name }, // テスト用の為、手動でキャッシュを更新
      {
        revalidate: false, // テスト用の為、キャッシュの再検証を false: 無効 にする
      },
    );
    // mutate(); // DBがある場合、左のコードのみでキャッシュの更新とデータの再取得を自動でしてくれる

    // ④ Redux Toolkit の状態も更新
    dispatch(setName(newName));
  }

  return (
    <>
      <h2>SWR Redux Toolkit UserPage</h2>
      <p>{data.name}</p>
      <button onClick={() => updateUserName('taro')}>名前更新</button>
    </>
  );
}

処理内容

“Leanne Graham” と表示されている
“名前更新” ボタンで、画面にログに ”taro” と “updateUser Name: taro” が表示される

まとめ

SWR について、mutate や Redux Toolkit とあわせて解説してきましたが、いかがでしたでしょうか？

SWR は React.js でのデータ取得をシンプルにしてくれる React Hooks ライブラリ のことで、API からの データ取得やキャッシュ、自動更新といった処理を管理 し、常に最新のデータ を扱えるようにしてくれます。

また SWR が 保持しているキャッシュを最新の状態に更新する mutate や アプリ全体で共有 したい ログイン情報 や 選択中のデータなどの状態を管理 してくれる Redux Toolkit 組み合わせることで、「API 更新 → 画面更新 → Redux Toolkit での共有」 という流れが明確になり、状態管理 が複雑になりにくく、安心して実装を進めることができます。