时间戳

首页 > 解决方案 > 苗条退订实际上是如何工作的？

svelte - 苗条退订实际上是如何工作的？

问题描述

我可以订阅这样的商店：

count.subscribe(value => {
  count_value = value;
});

但是当我们想取消订阅时，我们会将之前的订阅代码放入一个新变量中（成为一个函数表达式），并且只有在组件被销毁时才运行它（onDestroy）

const unsubscribe = count.subscribe(value => {
    count_value = value;
});

onDestroy(unsubscribe);

问题是，如何将前一个函数放入一个名为 unsubscribe 的新变量中。可以对商店执行取消订阅功能。我的意思是我们甚至根本不改变取消订阅实现的订阅代码，我们所做的只是把它放在一个新的变量中，让它变成一个函数表达式并且只通过 调用它onDestroy，那么它怎么能神奇地取消订阅呢？它实际上是如何工作的？

标签： sveltesvelte-3svelte-store

解决方案

subscribe不返回您作为参数传递的函数：它返回一个实现取消订阅行为的新函数。

如果您查看自定义商店合同的 Svelte 文档（已添加重点），这将更容易理解：

店铺合同

store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }

通过实现 store 契约，你可以创建自己的 store 而不依赖于svelte/store：

  1. 商店必须包含一个.subscribe方法，该方法必须接受订阅函数作为其参数。此订阅函数必须在调用 .subscribe 时立即与商店的当前值同步调用。每当商店的价值发生变化时，商店的所有活动订阅函数都必须在以后同步调用。
  2. 该.subscribe方法必须返回一个取消订阅函数。调用取消订阅函数必须停止其订阅，并且商店不能再次调用其对应的订阅函数。

如果您想进一步证明 的返回值与subscribe您传递的函数不同，只需提取 的类型store.subscribe：

Type subscribe = (subscription: (value: any) => void) => (() => void)

subscription参数的(value: any) => void签名 与返回值的签名不匹配() => void。

这是商店合约的简单实现，演示了如何构建取消订阅功能。

class Store {
    constructor(init) {
        this.subscribers = {};
        this.value = init;
    }
    subscribe(callback) {
        callback(this.value);
        const id = Symbol()
        this.subscribers[id] = callback;

        return () => delete this.subscribers[id]
        //     ^^^ unsubscribe function here ^^^

    }
    set(value) {
        this.value = value;
        for (const id of Object.getOwnPropertySymbols(this.subscribers)) {
            this.subscribers[id](value)
        }
    }
}

推荐阅读