Cycle.js: 自定义 driver 不在 main() 中发出任何事件

Question

我正在创建自定义 cycle.js driver 以预加载图像。主函数导出一个接收器流 imagesToLoad 发出图像 URL 数组。然后由 driver 和 should return 加载图像加载完成时发出的流。

问题

我可以在 driver 的代码中订阅由 driver 编辑的流 return 并看到加载的图像确实被发射 但从来没有从主函数内部映射时.

我可能做错了什么，但我看不出具体是什么。

driver

import { from, Subject } from 'rxjs'
import { adapt } from '@cycle/run/lib/adapt'

const loadImage = (src) =>
    new Promise((resolve, reject) => {
        const img = new Image()
        img.addEventListener('load', () => resolve(img))
        img.addEventListener('error', (err) => reject(err))
        img.src = src
    })

export const makeImageLoaderDriver = () => {

    const imageLoaderDriver = (sink$) => {
        const imageCache = {}
        const source$ = new Subject()

        from(source$).subscribe({
            next(images) {
                const imagesPromises = images.map((src) => {
                    const imgSuccess = { src, loaded: true }
                    if (!!imageCache[src]) return Promise.resolve(imgSuccess)
                    return loadImage(src)
                        .then(() => {
                            imageCache[src] = imgSuccess
                        })
                        .catch((error) => {
                            imageCache[src] = { src, loaded: false, error }
                        })
                })

                Promise.all(imagesPromises).then(() => {
                    source$.next(imageCache)
                })
            },
        })

        return adapt(source$)
    }

    return imageLoaderDriver
}

index.js

const drivers = {
    imagesToLoad: makeImageLoaderDriver(),
}

run(main, drivers)

主要功能

export function main(sources) {

    sources.imagesToLoad.pipe(map(console.log)) // THIS NEVER LOGS ANYTHING

    return {
        imagesToLoad: of([ imageUrl1, imageUrl2 ]),
    }
}

Answer 1

sources.imagesToLoad.pipe(map(console.log)) 创建一个新的 Observable，但是这个 Observable 没有命名（作为 const）并且没有在其他任何地方使用。它刚刚被删除并且从未订阅过，因此 main 中的那一行实际上什么都不做。

它需要插入其他流管道之一，该流管道将以某种方式最终进入 接收器。例如，获取该操作的输出，将其命名为 const，然后在另一个流管道中使用该 const 流，并且该流管道最终必须在接收器中结束。

要调试，您可以将 .subscribe() 放在 map 之后，您很可能会看到 console.log 发生。只是不要在代码中留下 subscribe()，因为 Cycle.js 是一个框架，您永远不需要在 main 端订阅，因为订阅是针对驱动程序端的。

另请注意，您的驱动程序将 sink$ 作为输入，但它从不使用它。您应该订阅 sink$ 并根据其排放执行效果。

Cycle.js: 自定义 driver 不在 main() 中发出任何事件

Cycle.js: Custom driver not emitting any event inside main()

javascript

cyclejs

问题

driver

index.js

主要功能