foo.js

var spinner = `<div class="sk-wave">
  <div class="sk-rect sk-rect1"></div>
  <div class="sk-rect sk-rect2"></div>
  <div class="sk-rect sk-rect3"></div>
  <div class="sk-rect sk-rect4"></div>
  <div class="sk-rect sk-rect5"></div>
</div>`

var template = `
<div id="wrapper">
  <header id="header" class="template-#{state}">
    <span>#{text.save}</span>
  </header>
  
  <aside id="aside">
  ...
  </aside>
</div>
`

var A = createContainer(document.getElementById('wrapper'), {}, function Areducer(state, action) {
  
  switch(state.current) {

    default:

      return Object.assign({}, state, {
        state: '',
        text: {
          save: 'Save'
        }
      })

  }
  
})

A.innerHTML = template

A.update({current: null})

var B = createContainer(document.getElementById('header'), {}, function Breducer(state, action) {
  
  switch(state.current) {
    
    case 'saving':

      return Object.assign({}, state, {
        state: `state-${state.current}`,
        text: {
          save: spinner
        }
      })

    default:

      return Object.assign({}, state, {
        state: '',
        text: {
          save: 'Save'
        }
      })

  }
  
})

B.update({current: 'saving'})