Skip to content

A tiny library inspired by Redux & Vuex to help you manage state in your JavaScript apps

License

Notifications You must be signed in to change notification settings

Andy-set-studio/beedle

Repository files navigation

Beedle

The current build status based on whether tests are passing The Uncompressed size of Beedle The GZIP size of Beedle The Brotli size of Beedle License: MIT

Beedle is a tiny library to help you manage state across your application. Inspired by great libraries like Vuex and Redux, Beedle creates a central store that enables you predictably control and cascade state across your application.

This library was initially created as a prototype for this article on CSS-Tricks, where you learn how to build a state management system from scratch with Vanilla JavaScript.

See the documentationSee the project structure

Demos

How it works

Beedle creates a pattern where a single source of truth, the 'Application State' cascades state across your app in a predictable fashion. To modify state, a set flow of actions and mutations help create a traceable data-flow that makes things a little easier to debug.

Using a Pub/Sub pattern which notifies anything that is subscribed to changes, a fully reactive front-end can be achieved with a few kilobytes of vanilla JavaScript.

A flow diagram that shows an action that calls a mutation, which mutates the state and triggers an update to anything that is listening

As the diagram above shows, a simple, predictable flow is created by pushing data into an action which subsequently calls one or more mutations. Only the mutation can modify state, which helps with keeping track of changes.

Continue reading the documentation

A mini library for small projects

Beedle is inspired by libraries like Redux, but certainly isn't designed to replace it. Beedle is aimed more at tiny little applications or where a development team might be looking to create the smallest possible footprint with their JavaScript.

Performance budget

Beedle is intended to be tiny, so the largest that the uncompressed size will ever get to is 5kb.

Browser support

Beedle is aimed at browsers that support ES6 by default. It also uses a Proxy to monitor state, so anything that supports Proxy will support Beedle.

You could use the Proxy polyfill to support more browsers.

Most major browsers will support Beedle with no issues.

Getting started

You can pull Beedle down via npm or take a zip of this repository. The rest of this guide assumes you've used npm.

1) Install

Run npm install beedle in your project directory.

2) Create a store instance

First up, import it into your JavaScript:

import Store from 'beedle';

Once you've got that you should create some actions, mutations and some initial state:

const actions = {
    saySomething(context, payload) {
        context.commit('setMessage', payload);
    }
};

const mutations = {
    setMessage(state, payload) {
        state.message = payload;

        return state;
    }
};

const initialState = {
    message: 'Hello, world'
};

Once you've got those setup, you can create a Store instance like this:

const storeInstance = new Store({
    actions,
    mutations,
    initialState
});

3) Use in your app

Let's say you've got a text box that you type a message into. When the content is changed, it could dispatch a new message to your store:

// Grab the textarea and dispatch the action on 'input'
const textElement = document.querySelector('textarea');

textElement.addEventListener('input', () => {

    // Dispatch the action, which will subsequently pass this message to the mutation
    // which in turn, updates the store's state
    storeInstance.dispatch('saySomething', textElement.value.trim());
});

4) Listen for changes

Beedle uses the Pub/Sub pattern to transmit changes. Let's attach the message to a DOM element:

// Grab the text element and attach it to the stateChange event
const messageElement = document.querySelector('.js-message-element');

// This fires every time the state updates
storeInstance.subscribe(state => {
    messageElement.innerText = state.message;
});

Head over to the basic demo to see this in action 🚀

Acknowledgements

Thanks to Eli Fitch for giving me the idea to call this Beedle. This matches my preference to call my little projects names based on Zelda. Here's Beedle from Zelda.

Thanks to the incredible people who maintain projects such as Redux, Vuex and MobX et. al. Thanks for making our lives easier and for inspiring this project.