What To Do When One Stream Depends On The Value From Another?
I'm new to Rx.js and looking for some basic help with FRP concepts. I have one stream using generateWithRelativeTime
that keeps a game loop running, and a stream that keeps track of the screen resolution. My problem with my current code is that my game loop only runs when my screen resolution changes.
The stream generated by my model function requires the latest value from res$.
function model(res$) {
return res$.map(res => {
const rows = ceil(res[1] / CELL.HEIGHT)+1
const cols = ceil(res[0] / CELL.WIDTH)+1
return Observable.generateWithRelativeTime(
initWorld(rows, cols, 1.618),
noOp,
world => step(world),
noOp,
_ => 100,
Rx.Scheduler.requestAnimationFrame
).timeInterval()
});
}
function intent() {
return Observable.fromEvent(window, 'resize')
.map(e => [e.currentTarget.innerWidth, e.currentTarget.innerHeight])
.debounce(100, Rx.Scheduler.requestAnimationFrame)
.startWith([window.innerWidth, window.innerHeight])
}
model(intent())
Answer
Welcome to the joy of FRP. As it is, it is difficult to understand your question. How What to do when one stream depends on the value from another?
is connected to My problem with my current code is that my game loop only runs when my screen resolution changes.
? You give the actual behavior, what is your expected behavior?
For my limited understanding of the question, I think that you need to replace this line return res$.map(res => {
by return res$.flatMapLatest(res => {
, i.e. use the operator flatMapLatest
instead of the map
operator.
To understand the flatMap
operator, I recommend you to review the following resources : The introduction to reactive programming you've been missing, the illustrated marbles and the official documentation.
PS : I see that you seem to follow a MODEL-VIEW-INTENT architecture. Out of curiosity, are you experimenting with cyclejs
?
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM