Q20: Create a Reactive Auto-Tracking State Store Using Proxy

Create an automated reactive store where accessing properties inside a watchEffect callback registers dependencies and mutating properties triggers re-execution.

Proxy-Based Reactive State Store

let activeEffect = null;

function createReactiveStore(initialState) {
  const deps = new Map();

  return new Proxy(initialState, {
    get(target, key, receiver) {
      if (activeEffect) {
        if (!deps.has(key)) deps.set(key, new Set());
        deps.get(key).add(activeEffect);
      }
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      if (deps.has(key)) {
        deps.get(key).forEach(effect => effect());
      }
      return result;
    }
  });
}

function watchEffect(effect) {
  activeEffect = effect;
  effect();
  activeEffect = null;
}

💡 Active effects trigger getter traps to register keys as dependencies, allowing setter traps to re-run affected callbacks on change.

Key Takeaways

Core architecture powering reactivity in modern frameworks (e.g. Vue 3 Reactivity).
get traps track active effect dependencies; set traps notify and re-run dependent effects.

Knowledge Check

How does watchEffect automatically detect which store keys an effect function depends on?

Q20: Create a Reactive Auto-Tracking State Store Using Proxy

STAY UPDATED WITH BYTES!