Состояние таймера Rx не обновляется в Cycle.js

Question

Я запускаю таймер, когда кто-то нажимает кнопку, которую я намереваюсь использовать как непрозрачность для некоторого элемента. Когда я использую do для отслеживания значения, я вижу, что он выплескивается на консоль 40 раз, но в поле зрения число остается. Не уверен, куда я иду неправильно здесь:

let intent = ({ DOM }) => ({ 
    clickLogin$: DOM.select('.sign-in').events('click').map(ev => true) 
}) 

let model = ({ clickLogin$ }) => 
    Rx.Observable.combineLatest(
    clickLogin$.startWith(false), 
    clickLogin$.map(x => 
     Rx.Observable.timer(1, 1) 
    ).switch().startWith(0).take(40), 
    (signingIn, fadeValue) => ({ signingIn, fadeValue }) 
) 

let view = (state$) => { 
    return state$.do(
    x => console.log(x.fadeValue)) // this fires |--1-2-3-4-5-6-7-8--> 
    .map(({ signingIn, fadeValue }) => 
    div(`.app`, [ 
     div([fadeValue]), // this value does not change 
     If(signingIn, 
     div(`.overlay`, { 
      style: { 
      backgroundColor: `rgba(0, 0, 0, 0.${fadeValue})` // nor does this 
      } 
     }) 
    ) 
    ]) 
) 
} 

let main = (sources) => { 
    let view$ = view(model(intent(sources))) 
    return { 
    DOM: view$, 
    history: sources.History, 
    Props: sources.Props, 
    } 
} 

UPDATE: Оказывается, имея небольшая ошибка в hyperscript вызвало его странное поведение. Я даже не включил его в свой пример, потому что я не думал, что это имеет значение.

div(`content`, [ `testing` ]) 

Просто изменяя выше (добавление указания класса)

div(`.content`, [ `testing` ]) 

Причиненный все волшебно работать.

Answer 1

Это, вероятно, не полный ответ, но он помогает идентифицировать проблему. Я удалил часть кода кода представления If и добавил repeat, поместив ее в tricycle, и вы увидите, что fadeValue генерируется последовательно, как ожидалось.

var Cycle = require('@cycle/core'); 
var CycleDOM = require('@cycle/dom'); 
var Rx = require('rx'); 
var makeDOMDriver = CycleDOM.makeDOMDriver; 
var div = CycleDOM.div; 

var sources = { 
    DOM: makeDOMDriver('.app') 
}; 

let main = (sources) => { 

let intent = ({ DOM }) => ({ 
    clickLogin$: Rx.Observable.interval(3000).take(5).share() 
}) 

let model = ({ clickLogin$ }) => 
    Rx.Observable.combineLatest(
    clickLogin$.startWith(false), 
    clickLogin$.flatMapLatest(function (x) { 
     return Rx.Observable.timer(200, 200); 
    }).take(10).repeat(), 
    (signingIn, fadeValue) => ({ signingIn, fadeValue }) 
) 

let view = (state$) => { 
    return state$.do(
    x => console.log(x.fadeValue)) // this fires |--1-2-3-4-5-6-7-8--> 
    .map(({ signingIn, fadeValue }) => 
    div(`.app`, [ 
     div([fadeValue]) // this value does not change 
    ]) 
) 
} 

    let view$ = view(model(intent(sources))) 
    return { 
    DOM: view$, 
    history: sources.History, 
    Props: sources.Props, 
    } 
}