DEV Community

Osinachi Chukwujama
Osinachi Chukwujama

Posted on • Updated on

Managing State in Small Apps

State management is a very important part of modern frontend development. Libraries such as React and Vue have libraries (Redux, Vuex) dedicated to state management.

But what about vanilla JS?

Recently, I was developing a vanilla app. This app required robust state management because variables weren't enough. I thought of what to use to manage state and stumbled on Beedle. I totally forgot that I could use Redux without React. I guess it doesn't matter anymore. I have already learnt Beedle.

So then, I'm writing about Beedle.

Beedle is basically a tiny library which gives you greater control over your app's state. Three important concepts exist within Beedle.

  1. Actions
  2. Mutations
  3. State

But before I say any other thing, here's a sample app I built.

The Three Musketeers

Actions

Actions within Beedle are methods in an actions' object. These actions commit are stuff which transmits changes to methods called

const actions = { 
  colorClick(context, payload){
    context.commit('handleClick', payload)
  }
};
Enter fullscreen mode Exit fullscreen mode

Mutations

Mutations being methods which modify the state. Just like setState in react, but in this case, the app's state is directly modified.

const actions = { 
  handleClick(state, payload){
    state.color = payload.color;
    state.coloredText = payload.text;
    return state;
  }
};
Enter fullscreen mode Exit fullscreen mode

InitialState

InitialState is simply the initial state of the app

const initialState = {
    color:'',
    coloredText:'black',
    preText:'I am',
  }
};
Enter fullscreen mode Exit fullscreen mode

The Store

The store is an object which contains the state of the app. Since Beedle is basically an exported class, an instance of the store has to be created like this

const store = new Store({ actions, mutations, initialState });
Enter fullscreen mode Exit fullscreen mode

Similar to redux, the state can be gotten from the store.

The dispatch method exists on the store object

Actions are dispatched to the store when we want the state to change
Something like this

titleSetter.addEventListener('input', () => {
  store.dispatch('textInput', titleSetter.value)
})
Enter fullscreen mode Exit fullscreen mode

Here's the flow

events => actions => mutations => change state => subscribed variabled are altered;
Enter fullscreen mode Exit fullscreen mode

The store gives one the ability to update variables if the state changes. Only subscribed variables are altered.

storeInstance.subscribe(state => {
  textColor.style.color = state.color;
})
Enter fullscreen mode Exit fullscreen mode

So then, we have a small library which we can use to manage state.
IMHO, I didn't explain anything in this post. If you want to learn to use Beedle, the docs are the best resource. But thanks for reading anyways.

Discussion (2)

Collapse
afewminutesofcode profile image
Aaron

Thanks for sharing this tip Chukwujama! Just one thing I had trouble accessing the Beedle link from you article, Here is the link if others want to access it? Beedle

Keep up the great work!

Collapse
vicradon profile image
Osinachi Chukwujama Author

Thanks a lot Aaron.