在不牺牲 Svelte 反应性的情况下限制 firestore 中的 read/writes

Question

我正在构建抵押贷款计算器。

我有一个购买价格字段和一个预付款字段。两者都有一个范围滑块。当您调整购买价格或首付款时，计算器会（被动地）显示美元金额。

我在后端安装了 Firestore，但从范围滑块向 Firestore 发送输入更新的速度可能会非常快。

有没有办法在不牺牲前端 Svelte 的反应性的情况下使用 Firestore 来限制 reads/writes？

我想在 View 和 Firestore 之间建立一个 Svelte 商店，但是您将如何同步 Svelte 商店和 Firestore？

它比抵押贷款计算器更复杂，我只是觉得这是一个很好的类比。

此外，我确实需要数据为每个用户保留，如果他们以后要重新访问的话。

Answer 1

为什么不直接使用范围输入的change事件？
拖动滑块时，会反应性地显示当前值。但只有当释放句柄时，才会触发更改事件，并且可以将设置值保存到 firestore > REPL

<script>
    let value="30"
    
    function handleOnChange(event) {
        console.log(event.target.value)
        //save value to firestore   
    }
</script>

<p>
    {value}
</p>
<input type="range" min="0" max="100" bind:value on:change={handleOnChange}>

Answer 2

我已经实施了@Tonton-Blax 建议的解决方案。

我添加了一个自定义商店，其中包含更新我的 Firestore 数据库的功能。然后我把它包裹在去抖动中。

见REPL

自定义商店：https://svelte.dev/tutorial/custom-stores

在不牺牲 Svelte 反应性的情况下限制 firestore 中的 read/writes

Throttle read/writes in firestore without sacrificing Svelte reactivity

svelte

svelte-store