使用Cycle.js将REST响应存储至indexedDB的技术问题咨询

嘿，Pete，很高兴看到你在深挖Cycle.js的数据流模式——这确实是个能帮你理清职责边界的好问题！咱们一步步来拆解你的疑问：

1. 这是否属于自定义驱动的适用场景？ #

绝对是！Cycle.js的核心设计之一就是用驱动（Driver）封装副作用，而将HTTP响应持久化到indexedDB这种跨组件、偏基础设施的操作，完全适合做成自定义驱动。这么做的好处有很多：

• 让业务组件只专注于UI逻辑和业务数据流，不用关心持久化的细节；
• 持久化逻辑可以复用在多个项目或组件中；
• 单独的驱动更容易测试，你可以模拟indexedDB的行为来验证逻辑。

2. 其他组件如何访问非自身发起的请求的响应流？ #

在Cycle.js的单向数据流模型里，数据流的共享主要通过主函数（main）的组合能力来实现，这里有几种常用的方式：

方式一：通过自定义驱动暴露响应/存储结果流 #

你的自定义indexedDB驱动不仅可以接收“要持久化的数据”的sink流，还可以暴露一个source流，用来向外提供已存储的数据或者持久化成功的通知。比如：

// 自定义indexedDB驱动
function makeIndexedDBDriver() {
  return function indexedDBDriver(persistRequest$) {
    // 处理持久化请求
    persistRequest$.subscribe({
      next: async ({ data, key }) => {
        // 用idb库简化indexedDB操作（你需要先安装该库）
        const db = await idb.open('myAppDB', 1, upgradeDB => {
          upgradeDB.createObjectStore('dataCache');
        });
        const tx = db.transaction('dataCache', 'readwrite');
        tx.objectStore('dataCache').put(data, key);
        await tx.done;
      }
    });

    // 暴露一个流，供其他组件获取已存储的数据
    const storedData$ = rxjs.from(async () => {
      const db = await idb.open('myAppDB');
      return db.transaction('dataCache').objectStore('dataCache').get('api-cache');
    }).mergeAll();

    return { storedData$ };
  };
}

然后在主函数里，你可以把HTTP的响应流传给驱动，同时让需要的组件订阅驱动暴露的storedData$：

function main(sources) {
  // 业务组件发起的HTTP请求流
  const httpRequest$ = sources.MyComponent.httpRequest$;
  // 获取HTTP响应流
  const httpResponse$ = sources.HTTP.select('api-data').flatten();

  // 将响应流转为持久化请求，传给indexedDB驱动
  const persistSink$ = httpResponse$.map(res => ({
    data: res.body,
    key: 'api-cache'
  }));

  // 其他组件通过sources获取存储的数据
  const AnotherComponent = anotherComponent({
    ...sources,
    cachedData$: sources.IndexedDB.storedData$
  });

  return {
    HTTP: httpRequest$,
    IndexedDB: persistSink$,
    DOM: rxjs.merge(sources.MyComponent.DOM, AnotherComponent.DOM)
  };
}

方式二：在主函数中直接共享响应流 #

如果暂时不想做自定义驱动，你也可以在主函数里把HTTP响应流直接传递给需要的组件。比如：

function main(sources) {
  const httpResponse$ = sources.HTTP.select('api-data').flatten();
  
  // 专门的持久化处理流（不用驱动，直接在主函数里处理副作用）
  httpResponse$.subscribe({
    next: async res => {
      // 这里写indexedDB存储逻辑
      const db = await idb.open('myAppDB');
      const tx = db.transaction('dataCache', 'readwrite');
      tx.objectStore('dataCache').put(res.body, 'api-cache');
      await tx.done;
    }
  });

  // 把响应流传给需要的组件
  const AnotherComponent = anotherComponent({
    ...sources,
    apiResponse$: httpResponse$
  });

  // ...其他返回逻辑
}

不过这种方式的缺点是持久化逻辑和主函数耦合在一起，不如驱动模式灵活和易维护。

关于你提到的“选择类别”问题 #

虽然你的描述没写完，但如果是指选择类别时需要访问之前持久化的数据，或者触发新的请求/持久化操作，核心逻辑还是一样的：通过主函数把对应的数据流（比如类别选择的事件流、存储的数据流）传递给组件，或者让组件通过驱动的sources获取需要的数据。

内容的提问来源于stack exchange，提问作者Pete