Reactでグローバルなステートを扱う場合、
Reduxを使用するのが主流かと思いますが、
ReactN
というライブラリによって、グローバルなステートをめっちゃシンプルに扱えたので、めっちゃシンプルに紹介します。
「めっちゃシンプルに扱えた」という表現をもう少し具体的な表現にすると、
「ちょっとだけ初期設定をしたら、useStateを使うノリでグローバルなステートを使えた」
という感じです。
ReactNを使用したサンプル
サンプル(CodeSandBox)
各ページで単一のstateとsetStateを使用しています。
上記のサンプルはTypeScriptと、ページ遷移にreact-router-domを使用しています。
ReactNの使い方
インストール
npm i reactn
または、
yarn add reactn
ちょっとだけ初期設定
- index.tsxで、グローバルに使いたいstateの名前と初期値を、下記のように設定します。
import React, { setGlobal } from "reactn";
// 'from "reactn"'で、Reactの諸機能とReactNの諸機能をまとめてインポートできます。
setGlobal({ count: 0 }); // setGlobal({ stateの名前: 初期値 })
ReactNのGitHubのREADME.mdに、「ReactDOMのレンダー前にsetGlobalをするのがオススメ」と書かれているので、サンプルではそれに従っています。
- global.d.tsで、グローバルステートの型を下記のように定義します。
import "reactn";
declare module "reactn/default" {
export interface State {
count: number;
}
}
初期設定は以上です。
あとはuseStateを使うノリで、グローバルステートを扱えます。
グローバルステートを扱う
グローバルステートを使いたいコンポーネントで下記のように記述すると、グローバルなステートを扱えます。
import { useGlobal } from "reactn";
const [count, setCount] = useGlobal("count");
// useGlobal("setGlobalで設定したstateの名前")
上記の通りグローバルステートの扱い方が、const [count, setCount] = useState(0);のような扱い方とほぼ同じではないでしょうか。
また、
const count = useGlobal("count")[0]; // stateだけを使う
const setCount = useGlobal("count")[1]; // setStateだけを使う
上記のようにグローバルステートを扱うこともできます。
以上がReactNを利用したグローバルステートの扱い方です。
"N"の正体
「ReactNの"N"はなんだろな」と思ったので、ReactNのREADMEやIssuesやReactNの記事を読み漁ったのですが、答えを見つけることができませんでした。
なので、ReactNの作者であるCharles Stoverさんに「"N"ってなんですか」と伺ったところ、下記のニュアンスの返答をいただきました。
ReactNは「より多くの機能を備えたReact」にしたかった。
そこで「Reactに足りない部分までカバーする」→「"React"に足りない部分"ion"(Reactの由来はReaction)までカバーする」という命名コンセプトを思いつき、"Reacti"や"Reactio"という名前にしようとしたが、いずれも既に使われていた。
それで"ReactN"という名前にいきついた。
だから"N"は何かの略ではない。
平たくしてまとめると、
「"Reaction"に対してはReactは"React"までだから、オレのライブラリはその先の"ion"まで届いてみせるぜ！」
ということかと思います。
些細な質問に答えてくださったことと、ReactNという素敵なライブラリを制作していただいたCharles Stoverさんに、謝意を申し上げます。