## はじめに

2023 年 10 月ごろに、[Recoil と Jotai に関する記事](https://sterfield.co.jp/blog/which-recoil-or-jotai/)を投稿しましたが、2023 年 3 月以降、Recoil の更新が進められていない状況で、React 19 以降では正常に動作しない見込みとなってきました[<a href="https://github.com/facebookexperimental/Recoil/issues/2318#issuecomment-2120383312" target="_blank">参考</a>]。  
そのため、これまで Recoil を使ってきた React のプロジェクトにおいて、別の状態管理ライブラリへの移行が必要となり、対応を進めています。  
その選択肢の一つとして、Redux への移行を行ったので、そのときの方法を Recoil と Redux のコードを比べながら、通常の状態と、API との通信を伴う非同期の状態の移行に分けて、ご紹介します。  
ここでご紹介する方法は、Redux は、Redux Toolkit と React Redux の利用を前提にしています。

## インストール

Recoil から Redux へ移行する場合、Redux Toolkit と React Redux を使うことで、Recoil のときと同じようなコードの書き方で、スムーズに移行できるので、そちらをインストールします。

```bash
npm i @reduxjs/toolkit react-redux
```

## ファイルの準備

以下はファイル構成の例です。

```
redux
├ hooks/ // React用のHooksを格納する
│ ├ normalExample.ts
│ ├ familyExample.ts
│ ┗ asyncExample.ts
├ slices/ // ReduxのSliceを格納する
│ ├ normalExampleSlice.ts
│ ├ familyExampleSlice.ts
│ ┗ asyncExampleSlice.ts
┗ store.ts  // Reduxのstore
```

## 通常の状態

### Recoil

```typescript
import {
  atom,
  useRecoilValue,
  useResetRecoilState,
  useSetRecoilState,
} from "recoil";

// Recoilのatomを設定
export const normalExampleState = atom<string>({
  key: "normalExample",
  default: "",
});

// get state
export const useNormalExampleValue = () => useRecoilValue(normalExampleState);

// set state
export const useSetNormalExampleState = (key) =>
  useSetRecoilState(loadingState);

// reset state
export const useResetNormalExampleState = () =>
  useResetRecoilState(normalExampleState);
```

上記のような状態を Recoil で設定していた場合、Redux Toolkit と React Redux を使って以下のように置き換えることができます。  
ご覧いただくとわかりますが、reducer による action の設定や Root の store.ts への設定のところが Recoil にはない記述ですが、それ以外は似たコードで構成できることがわかります。

### Redux

redux/slices/normalExampleSlice.ts

```typescript
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";

const initialState = "";

// ReduxのSliceを設定
export const normalExampleSlice = createSlice({
  name: "normalExample",
  initialState,
  reducers: {
    // set
    setNormalExample: (state, action: PayloadAction<string>) => {
      state.normalExample = action.payload;
    },
    // reset
    resetNormalExample: (state) => {
      state.normalExample = "";
    },
  },
});

export const { setNormalExample, resetNormalExample } =
  normalExampleSlice.actions;

export default normalExampleSlice.reducer;
```

redux/store.ts

```typescript
import { configureStore } from "@reduxjs/toolkit";
import { TypedUseSelectorHook, useSelector } from "react-redux";
import normalExample from "./slices/normalExampleSlice";

// 用意したSliceをstoreに登録する
export const store = configureStore({
  reducer: {
    normalExample,
  },
});

export type AppStore = typeof store;

export type RootState = ReturnType<AppStore["getState"]>;

export type AppDispatch = AppStore["dispatch"];

// useSelectorでは型が引き継がれないので、TypeScriptでは型を引き継げるuseAppSelectorを用意する
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
```

React 用の Hooks は、以下のように React Redux の useDispatch と useSelector（TypeScript の場合は store.ts で定義した useAppSelector）を利用して以下のように構成できます。

redux/hooks/normalExampleSlice.ts

```typescript
import { useDispatch } from "react-redux";
import { useCallback } from "react";
import {
  setNormalExample,
  resetNormalExample,
} from "@/redux/slices/normalExampleSlice";
import { useAppSelector, type RootState } from "../store";

// get state
export const useNormalExampleValue = () =>
  useAppSelector((state: RootState) => state.normalExample);

// set state
export const useSetNormalExampleState = () => {
  const dispatch = useDispatch();
  return (value: string) => {
    dispatch(setNormalExample(value));
  };
};

// reset state
export const useResetNormalExampleState = () => {
  const dispatch = useDispatch();
  return () => {
    dispatch(resetNormalExample(value));
  };
};
```

## AtomFamily からの移行

Recoil では、atomFamily という、同じ型の状態をキーごとに再利用するための便利な機能が用意されていますが、Redux Toolkit の Slice でも、以下のように構成することで、似た機能を実装できます。

### Recoil

```
import { atomFamily } from "recoil";

import {
  atom,
  useRecoilValue,
  useResetRecoilState,
  useSetRecoilState,
} from "recoil";

// RecoilのatomFamilyを設定

export const familyExampleState = atomFamily<string, string>({
  key: "familyExample",
  default: null
});

// get state
export const useNormalExampleValue = (key: string) => useRecoilValue(familyExampleState(key));

// set state
export const useSetNormalExampleState = (key: string) =>
  useSetRecoilState(familyExampleState(key));

// reset state
export const useResetNormalExampleState = (key: string) =>
  useResetRecoilState(familyExampleState(key));
```

### Redux

redux/slices/familyExampleSlice.ts

```typescript
import { createSlice, type PayloadAction } from "@reduxjs/toolkit";

export interface FamilyExampleState {
  [key: string]: string | null;
}

const initialState: FamilyExampleState = {
  default: null,
};

const familyExampleSlice = createSlice({
  name: "familyExample",
  initialState,
  reducers: {
    // set
    setFamilyExample(
      state,
      action: PayloadAction<{ key: string; value: string }>
    ) {
      state[action.payload.key] = action.payload.value;
    },
    // reset
    resetFamilyExample(state, action: PayloadAction<string>) {
      state[action.payload] = null;
    },
  },
});

export const { setFamilyExample, resetFamilyExample } =
  familyExampleSlice.actions;

export default familyExampleSlice.reducer;
```

redux/hooks/familyExampleSlice.ts

```typescript
import { useDispatch, shallowEqual } from "react-redux";
import { type RootState, useAppSelector } from "../store";
import {
  setFamilyExample,
  resetFamilyExample,
} from "../slices/familyExampleSlice";

export const useFamilyExampleValue = (key: string) =>
  useAppSelector((state: RootState) => state.familyExample[key], shallowEqual);

export const useSetFamilyExampleState = (key: string) => {
  const dispatch = useDispatch();
  return (value: string) => {
    dispatch(setFamilyExample({ key, value }));
  };
};

export const useResetFamilyExampleState = (key: string) => {
  const dispatch = useDispatch();
  return () => {
    dispatch(resetFamilyExample(key));
  };
};
```

## API 通信を伴う非同期の状態

API からのデータ取得など、非同期を伴う場合、Redux への移行には少しなれがひつようかもしれません。
以下のような Recoil では selector で API からのデータ取得を伴う状態を構成していた場合を移行する場合の例です。

### Recoil

```typescript
import {
  atom,
  selector,
  useSetRecoilState,
  useRecoilValue,
  useRecoilRefresher_UNSTABLE,
} from "recoil";
import { apolloClient } from "@/api/apollo-client";
import { exampleQuery } from "@/api/query/exampleQuery";

export const asyncExampleState = selector({
  key: "asyncExample",
  get: async () => {
    const { data, errors } = await apolloClient.query({
      query: exampleQuery,
      fetchPolicy: "no-cache",
    });
    if (errors) {
      throw errors;
    }
    return data.example;
  },
});

// get state
export const useAsyncExampleValue = () => useRecoilValue(asyncExampleState);

// reset state
export const useResetAsyncExampleState = () =>
  useRecoilRefresher_UNSTABLE(asyncExampleState);
```

### Redux

Redux Toolkit で非同期を伴う Slice を作成する場合、createAsyncThunk と createSlice の extraReducers で構成します。

redux/slices/asyncExampleSlice.ts

```typescript
import { createSlice, createAsyncThunk, PayloadAction } from "@reduxjs/toolkit";
import type { ApolloError } from "@apollo/client";
import { apolloClient } from "@/api/apollo-client";
import { exampleQuery, type Example } from "@/api/query/exampleQuery";
import type { RootState } from "../store";

// API用の状態の型を定義
const initialState: {
  data: Example[];
  status: "idle" | "loading" | "succeeded" | "failed";
  error: ApolloError;
} = {
  data: [],
  status: "idle",
  error: null,
};

// 非同期用のreducerを設定
export const fetchAsyncExample = createAsyncThunk<
  Example[],
  void,
  { state: RootState }
>("asyncExample/fetchAsyncExample", async (_, { rejectWithValue }) => {
  const { data, errors } = await apolloClient.query({
    query: exampleQuery,
    fetchPolicy: "no-cache",
  });

  if (error) {
    return rejectWithValue(error);
  }

  return data.example;
});

// SliceにextraReducersを使って非同期用のreducerを紐づける
export const asyncExampleSlice = createSlice({
  name: "asyncExample",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchAsyncExample.pending, (state) => {
        state.status = "loading";
      })
      .addCase(fetchAsyncExample.fulfilled, (state, action) => {
        state.status = "succeeded";
        state.data = action.payload;
      })
      .addCase(fetchAsyncExample.rejected, (state, action) => {
        state.status = "failed";
        state.error = action.payload as any;
      });
  },
});

export default asyncExampleSlice.reducer;
```

redux/hooks/asyncExampleSlice.ts

```typescript
import { useDispatch, shallowEqual } from "react-redux";
import { type RootState, useAppSelector } from "../store";
import { fetchAsyncExample } from "../slices/asyncExampleSlice";

// get state
export const useAsyncExampleValue = () => {
  const dispatch: AppDispatch = useDispatch();
  const { data, status } = useAppSelector(
    (state: RootState) => state.example,
    shallowEqual
  );

  // 状態が"idle"の時はfetchを実行する
  useEffect(() => {
    if (status === "idle") {
      dispatch(fetchAsyncExample());
    }
  }, [status, dispatch]);

  return data;
};

// reset state
export const useResetNormalExampleState = () => {
  const dispatch = useDispatch();
  return () => {
    dispatch(fetchAsyncExample());
  };
};
```

## 移行途中で Recoil と依存する状態を連携させる場合

移行途中で共存させなければならない場合、以下のように Recoil に依存する状態を Redux と連携できます。
ただし、Recoil 同士の状態と違い、Redux の状態の変化を Recoil は自動で検知してくれないので、Redux の状態を変更するときに、Recoil で Reset や Refresh を実行する必要があることの注意が必要です。

```typescript
import { selector } from "recoil";
import { store } from "@/redux/store";
import { apolloClient } from "@/api/apollo-client";
import { exampleQuery, type Example } from "@/api/query/exampleQuery";

export const exampleState = selector({
  key: "exampleState",
  get: async ({ get }) => {
    const keyword = store.getState().keyword;

    const { data, errors } = await apolloClient.query({
      query: exampleQuery,
      variables: {
        keyword,
      },
      fetchPolicy: "no-cache",
      errorPolicy: "all",
    });
    if (errors) {
      throw errors;
    }
    return data.example;
  },
  cachePolicy_UNSTABLE: {
    eviction: "most-recent",
  },
});
```

## まとめ

Recoil の atom や selector の書き方と Redux Toolkit の createSlice の書き方が似ていることもあり、意外とコードの移行の親和性が高いと感じました。  
ただ、非同期関係では Redux において createAsyncThunk を利用するなど、Recoil にはない独特の記述も必要で、慣れが必要な部分も実感しました。

## 参考リンク

- Recoil の更新状況: <a href="https://github.com/facebookexperimental/Recoil/issues/2318#issuecomment-2120383312" target="_blank">React 19 support · Issue #2318 · facebookexperimental/Recoil</a>
- Recoil の更新状況: <a href="https://recoiljs.org/blog" target="_blank">Blog | Recoil</a>
- Redux Toolkit の使い方 (はじめ方): <a href="https://redux-toolkit.js.org/tutorials/quick-start" target="_blank">Quick Start | Redux Toolkit</a>
- Redux Toolkit の使い方 (TypeScript): <a href="https://redux-toolkit.js.org/tutorials/typescript" target="_blank">TypeScript Quick Start | Redux Toolkit</a>
- Redux Toolkit の使い方 (非同期の状態): <a href="https://redux-toolkit.js.org/api/createAsyncThunk" target="_blank">createAsyncThunk | Redux Toolkit</a>

20240719_recoil-to-redux.png

Recoil から Redux へ移行するときにやったこと

## はじめに
Reactでフロントエンドの開発を行う場合に、おそらく一度は誰でも状態管理に頭を悩ませるのではないでしょうか。  
2023年10月現在、Redux、React Hooks、zustand、そしてここで取り上げる Recoil、Jotai など、Reactの状態管理をするためのライブラリや方法は数多く存在ます。  
多くの開発者によりその使い方が模索・洗練されていますが、絶対的な正解というものは存在しません。  
故に、プロジェクトに導入する場合に、どれを選定するかで、とても迷う方は多いのではないでしょうか。  
このブログでは、私が状態管理のライブラリを選定するときに悩んだ内容から、案件の向き不向きについて考察し、ご紹介したいと思います。  

**[2024.6.3 追記] Recoilから正式に発表されているわけではありませんが、2023年3月以降アップデートがなく、Recoilの開発は実質的に打ち切られてしまったようです。そのため、Recoilを選択することは避けた方がよさそうです…  
参考: <a href="https://github.com/facebookexperimental/Recoil/issues/2318" target="_blank">React 19 support · Issue #2318 · facebookexperimental/Recoil</a>**

**→ [2024.7.19 追記] [Reduxへ移行する方法の記事](https://sterfield.co.jp/blog/recoil-to-redux/)を投稿しました。**

## まず Redux、zustand と Recoil、Jotai の違いについて
Redux は、Reactを作ったFacebookが提唱した[Flux](https://github.com/facebookarchive/flux/tree/main/examples/flux-concepts)というアーキテクチャをもとにした、初期から最も利用されている状態管理ライブラリです。  
Reactとは切り離して１つのストアに集約して管理するため、情報の流れが一方通行で辿りやすい特徴があります。WEBアプリ全体の一貫性を重視し、堅牢な作りにする場合、Reduxは有望な選択肢となります。  
しかしながら、Reduxは非同期通信を伴うような複雑な状態管理ではそのまま使うのはあまりにもコードが膨大になってしまうため、サードパーティのプラグインなどを導入することが現実的な選択肢となります。また、1つのストアで管理するため、コンポーネント単位でのカプセル化が苦手です。  
  
zustand はこのReduxの苦手な部分を補うことで、Reduxからの乗り換えが進んでいるライブラリです。  
基本的な思想はReduxと同じですが、Reduxで煩雑になるような記述をより簡潔に書くことができます。 
  
Recoil は Redux とは違う思想で、ストアを複数持ち、それぞれに対して別々のコンポーネントからアクセス可能です。ストアが一元管理されているReduxやzustandとちがい、コンポーネント単位でのカプセル化がしやすく、データとアプリ全体の結合を制限することに向いているので、柔軟性を重視するアプリに向いていると言えそうです。
ただ、複数のストアに別々のコンポーネントから双方向でアクセスできる特徴が故に、組み方によってはReduxと比べると情報の流れを辿りにくくなる可能性があることに注意が必要です。  
  
Jotai は Recoil をより簡潔に記述できるようにしたライブラリで、[npm trends](https://npmtrends.com/Jotai-vs-react-redux-vs-recoil-vs-zustand)を見ると、2023年10月現在、本家のRecoilを追い抜いています。  

## RecoilよりJotaiが向いている案件
RecoilとJotaiで同じ状態管理をするためのコードを比べてみましょう。
#### Recoil
```typescript
const exampleState = atom({
  key: "exampleState",
  default: 0
});
const exampleSelector = selector({
  key: "exampleSelector"
  get ({ get }) => `${get(exampleState)}個を選択中`
});
```
#### Jotai
```typescript
const exampleState = atom(0);
const exampleSelector = atom((get) => `${get(exampleState)}個を選択中`);
```
こうやって並べてみるとよく分かりますが、  
Jotaiの方が圧倒的にコード数が少なくなります。  
Recoilで用意されている機能の多くはJotaiでも利用できるので、よりシンプルに状態管理を行いたい場合は、  Jotaiが向いていると言えます。  
  
## JotaiよりRecoilが向いている案件
では、次の場合はどうでしょう。  
#### Recoil
```typescript
// Writable
const idState = atom({
  key: "idState",
  default: 1
});

// Read Only
const fetchState = selector({
  key: "fetchState",
  get: async ({ get }) => {
    const id = get(idState);
    try {
      const response = await fetch(`example.api.json?id=${ id }`);
      const json = await response.json();
      return json;
    } catch (error) {
      throw error;
    }
  }
});

// Writable (default value fetched)
const complexState = atom({
  key: "complexState",
  default: selector({
    key: "complexSelector",
    get: async ({ get }) => {
      const json = await get(fetchState);
      return {
        id: json.id,
        name: json.exampleName
      }
    }
  })
});
```
#### Jotai
```typescript
// Writable
const idState = atom(1);

// Read Only
const fetchState = atom(async (get) => {
  const id = get(idState);
  try {
    const response = await fetch(`example.api.json?id=${ id }`);
    const json = await response.json();
    return json;
  } catch (error) {
    throw error;
  }
});

// Writable (default value fetched)
const defaultComplexState = atom(async (get) => {
  const json = await get(fetchState);
  return {
    id: json.id,
    name: json.exampleName
  }
});
const overWrittenComplexState = atom(null as { id: number; name: stirng; });
const complexState = atom<number, [number], void>(
  async (get) =>
    (await get(overWrittenComplexState)) ||
    (await get(defaultComplexState)),
  (_get, set, update) => set(overWrittenComplexState, update)
);
```
このように初期値をフェッチしつつ、後からデータの上書きもできるようなストアを作ろうとするような複雑な処理をさせようとした場合、JotaiよりRecoilの方が分かりやすいコードになることがわかるかと思います（もっと上手な書き方があったらすみません）。  
また、フェッチしたデータをリセットできるようにする場合、  
  
#### Recoil
```jsx
const exampleState = atom({
  key: "exmapleState",
  default: 0
})
const ExampleComponent = () => {
  const [example, setExample] = useRecoilState(exampleState);
  const reseter = useResetRecoilState(exampleState);
  const handleAddClick = () => setExample(previousState => previousState + 1);
  return (
    <div>
      <p>{example}</p>
      <button onClick={handleAddClick}>追加</button>
      <button onClick={reseter}>リセット</button>
    </div>
  )
}
```
のように、Recoilはatomに対してそのままuseResetRecoil()を使うことでリセット可能ですが、  
  
#### Jotai
```jsx
const exampleState = atomWithReset(0);
const ExampleComponent = () => {
  const [example, setExample] = useAtom(exampleState);
  const reseter = useResetAtom(exampleState);
  const handleAddClick = () => setExample(previousState => previousState + 1);
  return (
    <div>
      <p>{example}</p>
      <button onClick={handleAddClick}>追加</button>
      <button onClick={reseter}>リセット</button>
    </div>
  )
}
```
のように、Jotaiでは、あらかじめreset用のutil（atomWithRest）を使ってatomを用意する必要があります。  
その他にも、Jotaiでは複雑な操作をしようとした場合に、Recoilと同様の操作をするためにより多くのutilを使ったり、helperを自前で用意しなければいけない場合に遭遇します。  
  
これらのことから、より複雑なデータ処理を扱うような使い方をする場合、Recoilの方が向いていると言えます。  

## まとめ
堅牢でアプリ全体を見通すことを優先するのであれば Redux。  
基本的な思想はReduxと同じだけど、よりシンプルに描きたいのであれば zustand。  
機能追加やコンポーネントの入れ替えが多いような柔軟性のあるアプリで、複雑なデータ管理が必要なら Recoil。  
柔軟性とシンプルさを重視するなら Jotai というのが、現時点での自分の選択基準でした。

## 参考リンク

- [Jotai](https://jotai.org/)
- [Recoil](https://recoiljs.org/)
- [Redux](https://redux.js.org/)
- [zustand](https://github.com/pmndrs/zustand)
- [npm trends: jotai vs recoil vs redux vs zustand](https://npmtrends.com/jotai-vs-recoil-vs-redux-vs-zustand)

Company

Our Solutions

Support

News

Blog

Blogブログ

カテゴリーから探す

年別から見る

記事一覧 - タグ: #Recoil

2024/07/19

2023/10/05