Reactive Store

ReactiveStore.js

// Function to create a reactive store
function createStore(initialState) {
  // Store the initial state in a private variable
  let state = initialState;

  // Array to hold subscribers (callbacks)
  const subscribers = [];

  // Create a proxy for the state object
  const stateProxy = new Proxy(state, {
    // Trap for setting a property value
    set: function(target, property, value, receiver) {
      // Update the value of the property
      Reflect.set(target, property, value, receiver);
      // Trigger callbacks (subscribers) with the updated state
      subscribers.forEach((callback) => callback(stateProxy));
      // Indicate success
      return true;
    },
  });

  // Function to get the current state
  function getState() {
    return stateProxy;
  }

  // Function to subscribe to state changes
  function subscribe(callback) {
    subscribers.push(callback);
    // Return a function to unsubscribe
    return function unsubscribe() {
      const index = subscribers.indexOf(callback);
      if (index !== -1) {
        subscribers.splice(index, 1);
      }
    };
  }

  // Return the getter, setter, and subscribe functions
  return {
    getState,
    subscribe,
  };
}