DEV Community

Discussion on: Imba - a JavaScript alternative for increased developer productivity

codeluggage profile image
Matias Forbord

Documentation on state is right around the corner and is being discussed in the Discord community right now, but here's a quick answer:

How do I manage global state? / Where do I use Vuex/Redux/Mobx?

The answer is mind boggling because of how simple it is; you don't. It kind of feels like something is missing, coming from the big web frameworks where thinking about state is a huge part of the day to day work.

When working with the web directly, instead of through the virtual DOM layer of abstraction, it can be as simple as this:

1) Make a new file for state to live in - for example state.imba
2) Export a regular Javascript object to use as the default state - for example:

export let state = {
    answer: 42,
    question: "The Ultimate Question of Life, the Universe, and Everything"
Enter fullscreen mode Exit fullscreen mode

That covers the concept of global state, MUTATIONS and GETTERS. For the concept of ACTIONS we can add this, for example:

export def increment

export def decrement
Enter fullscreen mode Exit fullscreen mode

3) Use it wherever you need. Here's a full app that imports the state above and uses it for an important calculation:

import {
} from './state'

tag app
            if state.answer !== 42
                "A number"
        <button @click=decrement> "-"
        <pre> state.answer
        <button @click=increment> "+"

imba.mount <app>
Enter fullscreen mode Exit fullscreen mode

Here's a little repo of the above example:

Thread Thread
konung profile image

Wow . This is awesome !

One more question:
Can you bind to state ? If state changes from one component can you force an automatic update in another component connected/dependent on the same state variable ?