Separating State Management into its Own Module in Vanilla JavaScript

State management is an essential part of any application, and it can become complex as the application grows. It is crucial to organize the code in a way that makes it easy to manage and maintain. Separating the state management into its own module is an effective way to do this.

In this article, we will show you how to separate state management into its own module in vanilla JavaScript. We will provide you with an example that you can use in your own projects.

To begin with, we will create a file called store.js, which will contain the state management code. The first step is to define the initial state. In our example, we will create a state object that contains a count property, which is initialized to 0.

// Define the initial state
let state = { count: 0 };

Next, we will define a list of subscribers. These are functions that will be called whenever the state changes. In our example, we will create an empty array called subscribers.

// Define a list of subscribers
let subscribers = [];

We will then define a function called setState, which will update the state and notify the subscribers. The function takes a new state object as an argument and updates the state variable. It then loops over the subscribers array and calls each function with the new state object.

// Define a function to update the state and notify subscribers
function setState(newState) {
  state = newState;
  // Notify subscribers
  for (let i = 0; i < subscribers.length; i++) {
    subscribers[i](newState);
  }
}

We will also define a function called subscribe, which allows other parts of the application to subscribe to state changes. The function takes a callback function as an argument and adds it to the subscribers array.

// Define a function to subscribe to state changes
function subscribe(callback) {
  subscribers.push(callback);
}

Finally, we will export the state, setState, and subscribe functions so that they can be used in other parts of the application.

// Export the state, setState, and subscribe functions
export { state, setState, subscribe };

Now that we have defined the state management code in store.js, we can use it in other parts of the application. In our example, we will create a file called main.js, which will contain the code that uses the state management module.

First, we will import the state, setState, and subscribe functions from store.js.

import { state, setState, subscribe } from './store.js';

We will then subscribe a function that updates the DOM to state changes. In our example, we will update the count element with the new count value.

// Subscribe a function that updates the DOM to state changes
subscribe(function(newState) {
  document.getElementById('count').textContent = "Count: " + newState.count;
});

Next, we will define a function called incrementCount, which will increment the count property of the state object by 1.

// Define a function to increment the count
function incrementCount() {
  setState({ count: state.count + 1 });
}

Finally, we will call the incrementCount function to increment the count value.

// Call the function to increment the count
incrementCount();

By separating the state management into its own module, we have made it easier to manage and maintain the code. We can now add more functionality to the state management module without affecting the rest of the application.

In conclusion, separating state management into its own module is an effective way to organize code in vanilla JavaScript. It makes it easier to manage and maintain the code as the application grows. The example we provided can be used as a starting point for your own projects.