ReactでもVueのように簡単にグローバルな状態を管理したい

はじめに

VueのComposition APIはとても優秀で、単純なものであればプロバイダーや状態管理ライブラリを使用することなくグローバルな状態を簡単に管理することができます。

これはVueがComposition API呼び出し時ではなく、リアクティブな値を参照したタイミングで参照元を依存関係に自動的に追加し、値が変更されたタイミングで依存関係にあるコンポーネントが再レンダリングされるようになっている為です。

composable.ts

import { ref } from "vue";

export const state = ref(false);

check.vue

<script setup lang="ts">
import { state } from "./composable";
</script>

<template>
  <input type="checkbox" v-model="state">
</template>

App.vue

<script setup>
import { state } from "./composable";

import Check from "./check.vue";
</script>

<template>
  <input type="checkbox" v-model="state" />
  <Check />
  <Check />
</template>

Vue SFC Playground で確認

---

一方ReactではHooks APIの呼び出し元のコンポーネントが紐づいたディスパッチャーが返されるため、コンポーネントの中から呼び出す必要があります。

const [state, setState] = useState(false);
// React Hook "useState" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function.eslintreact-hooks/rules-of-hooks

使いどころ

このどこからでも更新でき、どこから参照しても同じ値が返ってくるグローバルな状態は、同じくアプリ上のどこからでもアクセスしたいローディングやアラートダイアログのようなグローバルなコンポーネントの管理をするのに便利です。

loading.vue

<script setup lang="ts">
import { loading } from "./loading";
</script>

<template>
  <teleport>
    <div v-if="loading" class="loading"></div>
  </teleport>
</template>

form.vue

<script setup lang="ts">
import { loading } from "./loading";

async function handleSubmit() {
  loading.value = true;

  //...

  loading.value = false;
}
</script>

<template>
  <button @click="handleSubmit()">Submit</button>
</template>

Reactで実装する

ということで、ないものは作りましょう。

Reactコンポーネントを再レンダリングさせるには、コンポーネント内から useState() を呼び出す事で取得できるディスパッチャーを使って値を更新します。

そこでこのディスパッチャーを保存しておき、値を更新するときにこの保存しておいたディスパッチャーを呼び出せば再レンダリングされます。

そしてあらかじめ作っておいたものがこちらです。

global-state.ts

import { Dispatch, SetStateAction, useEffect, useState } from "react";

export class GlobalState<T> {
  private setters: Set<Dispatch<SetStateAction<T>>> = new Set();
  constructor(private _state: T) {}

  setState(state: SetStateAction<T>) {
    if (typeof state === "function") {
      this._state = (state as (prevState: T) => T)(this._state);
    } else {
      this._state = state;
    }

    this.setters.forEach((setState) => setState(this._state));
  }

  useState() {
    // eslint-disable-next-line react-hooks/rules-of-hooks
    const [state, setState] = useState<T>(this._state);

    // eslint-disable-next-line react-hooks/rules-of-hooks
    useEffect(() => {
      this.setters.add(setState);
      return () => {
        this.setters.delete(setState);
      };
    }, []);

    return state;
  }
}

useStateメソッドからはもともと this._state を返していましたが、こちらのコメントで@honey32氏にご指摘いただいて state を返すように修正しました。

これをグローバルな状態として new します。
そして値の参照は .useState() 、更新は　.setState() を使います。

alert-dialog.tsx

import { GlobalState } from "./global-state";

// ...

const state = new GlobalState<Alert[]>([]);

export async function confirm(/* ... */) {
  return new Promise((r) => {
    const resolve = (arg: boolean) => {
      // アラートを削除
      state.setState((current) => current.filter((it) => it !== alert));
      // プロミスを解決
      r(arg);
    };

    const alert = {
      // ...
      resolve,
    };

    // アラートを追加
    state.setState((current) => [...current, alert]);
  });
}

export default function AlertDialog() {
  const dialogs = state.useState();

  return (
    <div>
      {dialogs.map(({ resolve }) => (
        <div>
          <button onClick={() => resovle(false)}>キャンセル</button>
          <button onClick={() => resovle(true)}>OK</button>
        </div>
      ))}
    </div>
  );
}

これでどこからでも呼び出せる確認ダイアログができました。

component.tsx

export default function Comp() {
  async function handleSumit() {
    if (!(await confirm())) {
      return;
    }

    // ...
  }
  return <button onClick={handleSubmit}>Submit</button>
}

まとめ

Vueのポテンシャルはまだまだ知られていない