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

【问题标题】：Loading json data into CycleJS app将 json 数据加载到 CycleJS 应用程序中
【发布时间】：2016-08-11 17:12:00
【问题描述】：

我正试图将我的头包裹在 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 发现的问题，但它们并没有让我进一步了解

【问题讨论】：

您是想用sources.HTTP 还是用request 调用view？
我不确定你的代码，你需要一些 state.map() 映射到 div。这个例子可能会让你走上正轨github.com/cyclejs/examples/blob/master/http-search-github/src/…

标签： javascript cyclejs

【解决方案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 返回给 main，或者换句话说，它返回一个包含其他 observable 的 Observable。这可以通过mergeAll() 或switch() 轻松纠正。 mergeAll() 和 switch() 有效地获取一个高阶可观察对象，并将其“扁平化”为包含“内部”可观察对象事件的可观察对象。

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

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

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

【讨论】：