RxJS combineLatest

by Leo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.7/rx.all.js"></script>
<button id="b1">Selected project</button>
<button id="b2">Session created</button>

JavaScript

let actions$ = new Rx.Subject();
let sessionCreated$ = actions$.filter((a)=> a.type == 'session_created')
let projectSelected$ = actions$.filter((a)=> a.type == 'project_selected')

projectSelected$.subscribe((a) => {
        console.log('Next projectId: ' + a.id);
});

sessionCreated$.subscribe((a) => {
        console.log('Next sessionToken: ' + a.sessionToken);
});


projectSelected$.combineLatest(sessionCreated$, (projectSelectedAction, sessionCreatedAction) => ({
                        selectedProjectId: projectSelectedAction.id,
                        sessionToken: sessionCreatedAction.sessionToken
                    }))
                    .forEach(({selectedProjectId, sessionToken}) => {
                                console.log(`!!!!! ${selectedProjectId} - ${sessionToken}`)
                    });


const prjBtn = document.querySelector('#b1') 
let projectId = 0;
const prjBtnClicks$ = Rx.Observable.fromEvent(prjBtn, 'click').forEach(()=>{
  actions$.onNext({type: 'project_selected', id: projectId++}); 
})

const sessBtn = document.querySelector('#b2') 
let sessionToken = 100;
const clicks2$ = Rx.Observable.fromEvent(sessBtn, 'click').forEach(()=>{
  actions$.onNext({type: 'session_created', sessionToken: sessionToken++}); 
})



/*
var subscription = actions$.subscribe(
    function (x) {
        console.log('Next: ' + x);
    },
    function (err) {
        console.log('Error: ' + err);
    },
    function () {
        console.log('Completed');
    });
*/