将json数据加载到CycleJS应用程序

Question

我试图用我的头脑去理解CycleJS，但是我被卡住了！我正在尝试将一个小应用程序组合在一起，该应用程序加载一个包含对象数组的JSON文件，但我无法让该应用程序执行http请求

到目前为止在我的代码中

​

'use strict';

import Rx from 'rx';
import Cycle from '@cycle/core';
import {h, makeDOMDriver} from '@cycle/dom';
import {makeHTTPDriver} from '@cycle/http';

function intent(DOM) {
    return {
        edit: DOM.select('div')
            .events('click')
            .map(evt => evt.target.value),
        add: DOM.select('div')
            .events('click')
            .map(evt => evt.target.value)
    };
}

function model(actions, response) {
    return response
}

function view(state) {
    return state.map(item => {
        h('div', [
            item.map(todo => h('div', todo.title))
        ])
    });
}

function main(sources) {
    const URL = 'http://localhost:3000/js/planinator/data.json';

    let response = sources.HTTP
        .mergeAll()
        .map(res => res.body)
        .startWith([]);

    const actions = intent(sources.DOM);
    const state = model(actions, response);

    return {
        DOM: view(state),
        HTTP: Rx.Observable.of(URL)
    }
}

Cycle.run(main, {
    DOM: makeDOMDriver('#appmount'),
    HTTP: makeHTTPDriver()
});

​

我现在要实现的是:加载JSON数据并将其呈现为div标记。

当我在chrome中运行代码时，我在控制台中得到以下代码

bundle.js:14182 TypeError: Cannot read property 'subscribe' of undefined(…)

我已经检查了stackoverflow发现的问题，但他们没有让我更进一步

Answer 1

欢迎使用Cycle.js :)

我注意到的第一个问题是，HTTP驱动程序首先需要一个可观察到的http请求，此时您只是向它传递一个url字符串。这可以通过使用Rx的Rx.Observable.of(URL)将URL包装在一个可观察的对象中来完成

function main(sources) {
  ...
  return {
    ...
    HTTP: Rx.Observable.of(URL)
  }
 }

接下来，我注意到您的request (实际上是您的响应！)有点滥用了HTTP驱动程序。HTTP驱动程序将一个高阶可观测对象返回给main，或者换句话说，它返回一个包含其他可观测对象的可观测对象。这可以很容易地通过mergeAll()或switch()来纠正。mergeAll()和switch()有效地获取了一个高阶可见，并将其“展平”为一个包含“内部”可见事件的可见。

let response = sources.HTTP
  .mergeAll()
  .filter(....)
  .map(....)
  .startWith([])

这两种方法之间的区别很微妙，但非常重要。mergeAll()的并发性是Infinity。这到底是什么意思？mergeAll()将获取所有内部可观察对象并订阅它们，并将它们的事件推送到包含可观察对象中，同时永远不会取消订阅。switch()与此类似，但其并发性为1。它将只订阅最新的内部可观察对象，同时处理以前的可观察对象。

我不能肯定这回答了您的所有问题，但我希望它至少能让您开始朝着正确的方向前进！:)