状態管理関数が意外とシンプルに作れた

React を使わずに TypeScript で開発していたプロジェクトで、状態管理がしたいと思う機会がありました。

サーバに置いてすべてのクライアントで共有するわけではないから個々のクライアント側がローカルに持っていればいい。

クライアント側のコードではグローバルにいろんなファイルから特定の変数を参照したい…という状況でした。

sessionStorage を使う方法もありますが、文字列など特定のデータしか保存できないという制約があったり、セキュリティ的に中身が見られたくないという場合もあるかもしれません。

そこで、ライブラリを使わずに状態管理をしてみたら、意外とシンプルにまとまったという話です。

変数を直接定義

まずは変数を定義して、それを export することで対応しました。

states.ts
1
export let someState: string = '';
2
export let anotherState: number = 0;

main.ts
1
import { someState, anotherState } from 'states';
2

3
...
4

5
if (someCondition) {
6
  someState = 'used';
7
}
8
...

しかし、もしこれらが同じファイル内にあれば問題ないのですが、import された変数を書き換えることはできません。

なので書き換えるための関数を定義して、それを使って書き込みを行うことにしました。

states.ts
1
export let someState: string = '';
2

3
export const setSomeState = (state: string) => {
4
  someState = state;
5
};
6

7
export let anotherState: number = 0;
8

9
export const setAnotherState = (state: number) => {
10
  anotherState = state;
11
};

main.ts
1
import { someState, anotherState } from 'states';
2
import { someState, setSomeState, anotherState } from 'states';
3

4
...
5

6
if (someCondition) {
7
  someState = 'used';
8
  setSomeState('used');
9
}
10
...
11

12
console.info(someState);

さて、プログラムは動きはするのですが…変更したはずの someState が変更されません。

どうやら、この例において console.info で参照されたタイミングでは import してきた someState が参照されるので、 初期値である '' が渡されるだけであって、変更後のリアルタイムな値は参照されないようです。

変更が反映された値を取得するには、state の値を取得する関数を呼び出せばいいです。

states.ts
1
export let someState: string = '';
2
let someState: string = '';
3

4
export const setSomeState = (state: string) => {
5
  someState = state;
6
};
7

8
export const someStateValue = () => someState; 
9

10
export let anotherState: number = 0;
11
let anotherState: number = 0;
12

13
export const setAnotherState = (state: number) => {
14
  anotherState = state;
15
};
16

17
export const anotherStateValue = () => anotherState; 

main.ts
1
import { someState, setSomeState, anotherState } from 'states';
2
import { someStateValue, setSomeState, anotherStateValue } from 'states';
3

4
...
5

6
if (someCondition) {
7
  setSomeState('used');
8
}
9
...
10

11
console.info(someState);
12
console.info(someStateValue());

これで値の読み書きがちゃんとできるようになりました。

さて、state をまとめたコードはこのようになりました。

states.ts
1
let someState: string = '';
2

3
export const setSomeState = (state: string) => {
4
  someState = state;
5
};
6

7
export const someStateValue = () => someState; 
8

9
let anotherState: number = 0;
10

11
export const setAnotherState = (state: number) => {
12
  anotherState = state;
13
};
14

15
export const anotherStateValue = () => anotherState; 

たった 2 つだけの state なのに、無駄に長い気がしますし、どこからどこまでがひとまとまりかがわかりづらいです。

そこで React の useState や Recoil の useRecoilValue などのように、自分でそのような状態管理の関数を作ろうとなりました。

状態管理関数を作成

例えば Recoil はどうなっているのか考えると、

atom は引数にデフォルト値を取り、state に関する変数を返します。

使用するときには useRecoilValue や useSetRecoilState の引数にその変数を指定することで、state を参照するための値やそれを変更するための関数を得ることができます。

それと同じようなことをやればいいです。

ところで、先ほどは各 state をファイルの上階層で直接定義していましたが、 今度は何が来るかわからないため、state を格納するオブジェクトや Map を作成します。

そこの各 state にアクセスするためには一意なキーが必要になります。

このへんが Recoil で atom を作成するときにグローバルにユニークなキーが必要になる理由なのかもしれません。

一応自分で指定しなくても一意になるように乱数でも生成して設定すればよいので、今回はそうしています。

stateManager.ts
1
type State<T> = { key: string; dflt: T };
2

3
type SetState<T> = (newState: T) => void;
4

5
type UseStateReturnType<T> = [ T, SetState<T> ];
6

7
/** すべての state を格納する Map */
8
const states: Map<string, any> = new Map();
9

10
const generateRandomKey = () => String(Math.random()).slice(-10);
11

12
/** state を初期化する */
13
export const createState = <T>(dflt: T = null): State<T> => {
14
  let key = generateRandomKey();
15
  while (states.has(key)) {
16
    key = generateRandomKey();
17
  }
18
  states.set(key, dflt);
19
  return { key, dflt };
20
};
21

22
export const useValue = <T>(state: State<T>): T => {
23
  return states.get(state.key);
24
};
25

26
export const useSetState = <T>(state: State<T>): SetState<T> => {
27
  return (newState: T) => {
28
    states.set(state.key, newState);
29
  };
30
};
31

32
export const useState = <T>(state: State<T>): UseStateReturnType<T> => [
33
  useValue(state),
34
  useSetState(state),
35
];

ジェネリクスのおかげで型推論してくれるので、使う側でも型の恩恵を受けられます。

state の定義や使用は次のようになります。

states.ts
1
export const someState = createState('');
2

3
export const anotherState = createState(0);

main.ts
1
import { useValue, useSetState } from 'stateManager';
2
import { someState, anotherState } from 'states';
3

4
...
5

6
const setSomeState = useSetState(someState);
7

8
if (someCondition) {
9
  setSomeState('used');
10
}
11
...
12

13
const someStateValue = useValue(someState);
14

15
console.info(someStateValue);

定義も使用もコードがだいぶすっきりしました。

バリデーション

自作なので、setState するときに特定の条件を満たす値のみを受け入れる、みたいなことももちろんできます。

stateManager.ts
1
type IgnoreConditionFunction<T> = (state: T) => boolean;
2

3
type State<T> = { key: string; dflt: T };
4
type State<T> = { key: string; dflt: T; ignore?: IgnoreConditionFunction<T> };
5

6
...
7

8
/** state を初期化する */
9
export const createState = <T>(dflt: T = null): State<T> => {
10
export const createState = <T>(dflt: T = null, ignore?: IgnoreConditionFunction<T>): State<T> => {
11
  let key = generateRandomKey();
12
  while (states.has(key)) {
13
    key = generateRandomKey();
14
  }
15
  states.set(key, dflt);
16
  return { key, dflt };
17
  return { key, dflt, ignore };
18
};
19

20
...
21

22
export const useSetState = <T>(state: State<T>): SetState<T> => {
23
  const ignore = state.ignore;
24
  return (newState: T) => {
25
    if (ignore !== undefined && ignore(newState)) {
26
      return;
27
    }
28

29
    states.set(state.key, newState);
30
  };
31
};
32

33
...

states.ts
1
/** 1 以上 8 以下の整数と null のみ許容する  */
2
export const exampleState = createState<number>(
3
  null,
4
  (state) => state !== null && (!Number.isInteger(state) || state <= 0 || state >= 9)
5
);

そんなにコードの記述量も多くないですが、このように状態管理をすることができました。

この記事が参考になれば幸いです。

では