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

Loading json data into CycleJS app

本文关键字：CycleJS 应用程序 加载 json 数据      更新时间：2023-09-26

我试图围绕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找到的问题，但他们没有让我进一步了解

欢迎来到循环.js :)

我注意到的第一个问题是，HTTP 驱动程序首先需要 http 请求的可观察量，目前您只需向它传递一个 url 字符串。这可以通过使用 Rx 的 URL 包装在可观察量中来完成Rx.Observable.of(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。它只会订阅最新的内部可观察量，同时处理以前的。

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

相关文章：