JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.0.6/rx.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/immutable/3.7.3/immutable.min.js"></script>
<script src="https://unpkg.com/staunch-store@1.0.3/dist/staunch.js"></script>
<p>Previous state</p>
<pre><code id="prev"></code></pre>
<p>New state</p>
<pre><code id="after"></code></pre>

JavaScript

function userReducer (user, action) {
    switch(action.type) {
        case 'USER_NAME':
            return user.set('name', action.payload);
        default: return user;
    }
}

function globalReducer (global, action) {
    switch(action.type) {
        case 'GLOBAL_AUTH':
            return global.set('auth', action.payload);
        default: return global;
    }
}

const initial = {
    user: {name: 'shane'},
    global: {auth: false}
};

const store = staunch.createStore(initial, {
    user: userReducer,
    global: globalReducer
});

// dom elements for rendering
const prev  = document.querySelector('#prev');
const after = document.querySelector('#after');

store.changes()
    .pairwise()
    .subscribe(x => {
        prev.innerHTML = JSON.stringify(x[0], null, 2);
        after.innerHTML = JSON.stringify(x[1], null, 2);
    });

let count = 0;

store.dispatch({type: 'USER_NAME', payload: 'kittie ' + count});

setInterval(function () {
    store.dispatch({type: 'USER_NAME', payload: 'kittie ' + count ++});
}, 1000);