Состояние таймера 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,
  }
}

ОБНОВЛЕНИЕ: Оказывается, небольшая ошибка в гиперсценарии вызвала странное поведение. Я даже не включил его в свой пример, потому что не думал, что это актуально.

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

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

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

Вызывает все, чтобы волшебным образом работать.

Answer 1

Это, вероятно, не полный ответ, но он помогает выявить проблему. Я удалил If часть генерации кода представления и добавлена repeat, поместите это в трехколесный велосипед, и вы можете увидеть, что 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,
  }
}