情弱のCycle.js備忘録

本記事は、自分向けに書いたCycle.jsの備忘録です。他の人が読んで†圧倒的成長†ができるようなものにはしていません。ただ、全くの初心者が勉強しながら悩んだことなどを箇条書きで記しているので、もしかしたら初学者の手助けになるかもしれません。また、どんどん追記していく予定です。

makeDOMdriverって何

function main(sources) {
    return sinks;
}

const drivers = {
    DOM: makeDOMDriver('#app-container'),
};

run(main, drivers);

みたいな感じでrunに投げると、引数のdriversに渡したidとかclass（ここでは、'#app-container'）に対応する<div>内に操作できるコンテナ？とDriverを作ってくれる。
ちなみに、#hogeでidを、.fugaでclassを表す。

sourcesとかsinks

sourcesとかsinksの型は、

type Request = {
    url: string,
    categoly: string,
    method: string
}

type Sources = {
    DOM: DOMSource,
    HTTP: HTTPSource
}

type Sinks = {
    DOM: Stream<VNode>,
    HTTP: Stream<Request>
}

みたいな感じで定義できる。
DOMSourceは、.select(#id.class')`でどのコンポーネントについて値を受け取るのか選べる。

http通信を扱う

import HTTPSource from @cycle/httpで良いいらしい。

sources.HTTP.select('category').flattten().map(res => ...)

みたいに、flattenで受け取ったレスポンスをならしてやる必要があるらしい。

drivers、Sink、Sourcesの話

Sinksとdriversの型は一致している必要があるっぽい（それはそう）。Sinks（drivers）に好きなStreamをぶち込むと、それはDriverに渡った後戻ってくる。すなわち、sourcesとして受け取ることができる。

inputについて

`input(`.class`, {attrs: { type: 'range'}});

のように、attrsプロパティでinputを指定できる。値を取り出したいときは、

const value$: Stream<number> = input$
    .map((ev: Event) => parseInt((ev.target as HTMLInputElement).value));

みたいな感じでやれるが、value自体はどうやらstringらしく、numberとして取り出すにはparseIntとかが必要っぽい。
後、'range'（slider）の場合はstartWith(DEFAULT_VALUE)で初期値を与えてやらないと表示されない。

combineについて

Stream.combine(a$,b$)とすると、a$とb$のそれぞれをリストの組みとする新しい配列が返る。つまり、combineしたものから値を取り出すには、Stream.combine(a$,b$).map(([a,b]) => {})とすれば良い。