苗条的退订实际上是如何工作的？ 店铺合同

如何解决苗条的退订实际上是如何工作的？ 店铺合同

我可以订阅这样的商店：

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

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

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

onDestroy(unsubscribe);

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

解决方法

但是当我们想要取消订阅时，我们会将之前的订阅代码放入一个新的变量中

这不是这里发生的事情。该函数未分配给 unsubscribe 变量；它的返回值是另一个函数。

把 subscribe 想象成这样：

const subscribe = (callback) => {
  callback('the stored value')

  const unsubscribe = () => {
    // do all the stuffs to unsubscribe here...
    console.log('Your are unsubscribed!')
  }

  return unsubscribe
}

let count_value

// unsubscribe is now the function returned in the subscribe function
const unsubscribe = subscribe(value => {
  count_value = value;
})

console.log(count_value)

// calling this function will log 'You are unsubscribed!' in the console
unsubscribe()

,

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

---

如果您查看自定义 store contracts 的 Svelte 文档（添加了重点），会更容易理解：

店铺合同

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

通过实施商店合同，您可以在不依赖 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)
        }
    }
}