const clientPages = createStore({

  index: 'Main page',

  login: 'Login page',

  profile: 'User profile',

})

​

const adminPages = createStore({

  index: 'Admin panel',

  login: 'Moderator sign-in',

  profile: 'Review user profile',

})

​

const $currentPage = createStore({

  client: 'index',

  admin: 'login',

})

​

const SubApp = ({app, pages}) => {

  const currentPage = useStoreMap({

    store: $currentPage,

    keys: [app],

    fn: (current, [app]) => current[app],

  })

  const content = useStoreMap({

    store: pages,

    keys: [currentPage],

    fn: (pages, [current]) => pages[current],

  })

  return (

    <section>

      <header>

        <h1>{app}</h1>

      </header>

      <p>{content}</p>

    </section>

  )

}

​

const App = () => (

  <>

    <SubApp app="client" pages={clientPages}/>

    <SubApp app="admin" pages={adminPages}/>

  </>

)

​

ReactDOM.render(<App/>, document.getElementById('root'))