Svelte でのグローバル状態管理

React などのフロントエンドでグローバル ステートを管理する場合、ほとんどの場合、React Hooks または Redux を使用します.
しかし、Rudux の実装は複雑で冗長です.その点ではReact Hooksの方がやや優れていますが、もっと簡単にやりたい!

数年前までは、個人的なプロジェクトで React をよく使用していました.しかし、グローバルな状態管理が面倒くさいので、React から Svelte にフレームワークを変更することにしました (ただし、Svelte は厳密にはフレームワークではなく、コンパイラです).

Svelte でのグローバル ステートの管理は、React での管理よりもはるかに簡単です.
順番に説明しましょう.

0. Svelte プロジェクトの作成

npx degit sveltejs/template my-project
cd my-project
npm install
npm run dev

official page を参照してください.

1.srcディレクトリにstores.jsを作成

まず、src ディレクトリに、グローバルな状態を宣言して格納する JavaScript ファイルを作成します.
ファイル名は、stores.js や globalState.js など任意です.

2. writable を使用してグローバル状態変数を宣言する

// src/stores.js
import { writable } from 'svelte/store';

export const myName = writable("Adam");

これを行うことで、この値 (ここでは myName) を使用して、プロジェクト内のいつでもどこでも変更できます.

3. グローバル ステートを使用する

プレフィックス ($) を追加することで、グローバルな状態値を使用できます.たとえば、Home.svelte では次のようになります.

<!-- src/routes/Home.svelte -->
<script>
    import { myName } from '../stores';
</script>

<span>My name is {$myName}.</span>

4.グローバルな状態を更新する

状態の変更も非常に簡単です.
グローバル ステートをインポートして新しい値を割り当てるだけです.たとえば、About.svetle では次のようになります.

<!-- src/routes/About.svelte -->
<script>
    import { onMount } from 'svelte';
    import { myName } from '../stores';

    onMount(async () => {
        $myName = "Eve";
    });
</script>

<span>My real name is {$myName}.</span>

5。結論

これを一度経験すると、他のフロントエンド フレームワークを使用するのをためらうほど単純で簡単です.

ちなみにSvelteKitも動作します.