Могут ли соседние магазины Svelte обновлять друг друга? - PullRequest
Новая
       39

Могут ли соседние магазины Svelte обновлять друг друга?

1 голос
/ 28 октября 2019

Я из React / Redux-land и постепенно знакомлюсь с шаблонами проектирования Svelte с помощью магазинов.

В настоящее время мне интересно выяснить, является ли это приемлемым шаблоном или нет, чтоэто лучший способ для общения такого рода. Основная предпосылка - я хочу иметь возможность обновлять несколько пользовательских хранилищ (которые используют доступные для записи) из соседнего хранилища.

В приведенном ниже примере у меня есть " loading.js " и " error.js"хранилища, которые будут использоваться глобально, закомментировано в хранилище" session.js". Я хотел бы обновить их, основываясь на результате запроса API для создания сеанса, чтобы сохранить большую часть моей тяжелой стороны компонентов.

В настоящее время я думаю, что я буду передавать каждыйхранилище необходимо с помощью функции " createSessionStore ", но оно выглядит немного неуклюжим, поскольку сильно зависит от порядка объявления каждого хранилища в " store.js "

Долгосрочное намерение сделать это таким образом состоит в том, чтобы я мог добавить любой тип коммуникационного уровня (например, веб-сокеты) в микшер и обновить глобальное хранилище загрузки или ошибок с любого слоя.

Спасибо за помощь.

Component.svelte 

<script>
  import { onMount } from "svelte";
  import { error, loading, session } from "./store";

  onMount(() => {
     session.fetchSession();
  }); 
</script>

{#if $loading}
  <div>Loading...</div>
{/if}

{#if $error}
  <div>Something went wrong: {$error}</div>
{/if}

store.js 

import { createErrorStore } from "./error";
import { createLoadingStore } from "./loading";
import { createSessionStore } from "./session";

export const error = createErrorStore();
export const loading = createLoadingStore();
export const session = createSessionStore();

session.js 

import { writable } from "svelte/store";

const INITIAL_STORE = {
    token: null
};

export const createSessionStore = (initialStore = INITIAL_STORE) => {

    const { subscribe, set } = writable(initialStore);

    const fetchSession = async () => {
        // loading.set(true);

        try {
            const response = await fetch("MY_API_ENDPOINT/auth/token", {
                method: "POST",
            });

            if (!response.ok) {
                const err = new Error("Network response was not ok.");
                // error.set(err);
                // loading.set(false);
                return;
            }

            const data = await response.json();

            set(data.token);
            // loading.set(false);
        } catch (err) {
            // error.set(err);
            // loading.set(false);
        }
    };

    const reset = () => {
        set(initialStore);
    };

    return {
        subscribe,
        fetchSession,
        reset
    };
};

error.js 

import { writable } from "svelte/store";

const INITIAL_STORE = false;

export const createErrorStore = (initialStore = INITIAL_STORE) => {

    const { subscribe, set } = writable(initialStore);

    const reset = () => {
        set(initialStore);
    };

    return {
        subscribe,
        set,
        reset
    };
};

loading.js 

import { writable } from "svelte/store";

const INITIAL_STORE = false;

export const createLoadingStore = (initialStore = INITIAL_STORE) => {

    const { subscribe, set } = writable(initialStore);

    const reset = () => {
        set(initialStore);
    };

    return {
        subscribe,
        set,
        reset
    };
};
...