将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上发现的问题，但它们没有让我有所进展。

- kristian nissen

---

您是想使用 sources.HTTP 还是 request 来调用视图函数？ - Andrew Van Slaars

我不确定你的代码，你需要在state.map()中映射到div。这个例子可能会让你走上正确的轨道https://github.com/cyclejs/examples/blob/master/http-search-github/src/main.js - jamesRH

Answer 1

欢迎来到 Cycle.js :)

我注意到的第一个问题是，HTTP驱动程序首先需要一个http请求的Observable，而目前您只是传递了一个url字符串。可以通过使用Rx的 Rx.Observable.of(URL) 将URL包装在Observable中来解决这个问题。

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

接下来，我注意到您的request（实际上是响应！）在使用HTTP驱动程序时有些误用。HTTP驱动程序将一个高阶Observable返回给主函数，换句话说，它返回一个包含其他Observables的Observable。这可以很容易地通过使用mergeAll()或switch()来纠正。 mergeAll()和switch()有效地将高阶observable“展平”为一个包含“内部”observables事件的observable。

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

这两种方法之间的区别微妙，但非常重要。mergeAll() 具有无限并发。这是什么意思呢？mergeAll()会订阅所有内部 observable 并将它们的事件推送到包含的 observable 中，同时永远不会取消订阅。 switch()类似，但并发度为1。它只会订阅最新的内部 observable，同时处理以前的observable。 我不能确定这回答了你所有的问题，但希望至少能帮助你朝着正确的方向开始！ :)

- TylorS