Reaction反应 #

import { makeAutoObservable, reaction } from 'mobx';

class Store {
  count = 0;
  name = 'MobX';

  constructor() {
    makeAutoObservable(this);
  }
}

const store = new Store();

// reaction(追踪函数, 副作用函数)
const dispose = reaction(
  // 追踪函数：返回要追踪的值
  () => store.count,
  // 副作用函数：值变化时执行
  (count, previousCount) => {
    console.log(`Count changed from ${previousCount} to ${count}`);
  }
);

store.count = 1;  // 输出: Count changed from 0 to 1
store.count = 2;  // 输出: Count changed from 1 to 2

// name 变化不会触发，因为没有被追踪
store.name = 'React';  // 没有输出

┌─────────────────────────────────────────────────────────────┐
│                    reaction 工作流程                         │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   reaction(                                                 │
│     () => trackedValue,    // 1. 追踪函数                    │
│     (value, prev) => { }   // 2. 副作用函数                  │
│   )                                                         │
│                                                             │
│   执行流程：                                                 │
│   1. 执行追踪函数，收集依赖                                  │
│   2. 追踪函数返回值变化时，执行副作用函数                     │
│   3. 副作用函数接收新值和旧值                                │
│                                                             │
└─────────────────────────────────────────────────────────────┘

import { autorun, reaction } from 'mobx';

// autorun：追踪所有访问的状态
autorun(() => {
  console.log(`Count: ${store.count}, Name: ${store.name}`);
});
// count 或 name 变化都会触发

// reaction：只追踪返回的状态
reaction(
  () => store.count,
  (count) => {
    console.log(`Count: ${count}`);
  }
);
// 只有 count 变化才触发

reaction(
  () => store.count,
  (count) => {
    console.log(`Count: ${count}`);
  },
  { fireImmediately: true }
);
// 立即输出: Count: 0

reaction(
  () => store.searchQuery,
  (query) => {
    fetchResults(query);
  },
  { delay: 300 }  // 延迟 300ms
);

import { comparer } from 'mobx';

// 结构比较
reaction(
  () => store.position,
  (pos) => {
    console.log('Position changed:', pos);
  },
  { equals: comparer.structural }
);

// 自定义比较
reaction(
  () => store.items.length,
  (length) => {
    console.log('Items count:', length);
  },
  { equals: (a, b) => a === b }
);

reaction(
  () => store.count,
  (count) => console.log(count),
  { name: 'countWatcher' }
);

import { reaction } from 'mobx';

// 只追踪用户登录状态
reaction(
  () => store.isLoggedIn,
  (isLoggedIn) => {
    if (isLoggedIn) {
      console.log('User logged in');
      loadUserData();
    } else {
      console.log('User logged out');
      clearUserData();
    }
  }
);

// 追踪对象的特定属性
reaction(
  () => ({ name: store.user.name, email: store.user.email }),
  (userInfo) => {
    saveUserInfo(userInfo);
  }
);

// 只追踪数组长度变化
reaction(
  () => store.items.length,
  (length, previousLength) => {
    console.log(`Items: ${previousLength} -> ${length}`);
  }
);

// 追踪计算值变化
reaction(
  () => store.filteredItems,
  (items) => {
    updateUI(items);
  }
);

import { makeAutoObservable, reaction, runInAction } from 'mobx';

class SearchStore {
  query = '';
  results = [];
  loading = false;

  constructor() {
    makeAutoObservable(this);

    // 使用 reaction 实现搜索
    reaction(
      () => this.query,
      async (query) => {
        if (!query.trim()) {
          this.results = [];
          return;
        }

        this.loading = true;
        try {
          const response = await fetch(`/api/search?q=${query}`);
          const results = await response.json();
          runInAction(() => {
            this.results = results;
            this.loading = false;
          });
        } catch (error) {
          runInAction(() => {
            this.loading = false;
          });
        }
      },
      { delay: 300 }  // 防抖
    );
  }

  setQuery(query) {
    this.query = query;
  }
}

export default new SearchStore();

import { makeAutoObservable, reaction } from 'mobx';

class CartStore {
  items = [];

  constructor() {
    makeAutoObservable(this);

    // 监听购物车变化
    reaction(
      () => this.items.length,
      (count, previousCount) => {
        if (count > previousCount) {
          this.showNotification('Item added to cart');
        } else if (count < previousCount) {
          this.showNotification('Item removed from cart');
        }
      }
    );

    // 监听总价变化
    reaction(
      () => this.total,
      (total) => {
        this.updateFreeShippingStatus(total);
      }
    );
  }

  get total() {
    return this.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  }

  showNotification(message) {
    console.log(message);
  }

  updateFreeShippingStatus(total) {
    if (total >= 100) {
      console.log('You qualify for free shipping!');
    }
  }

  addItem(item) {
    this.items.push(item);
  }

  removeItem(id) {
    this.items = this.items.filter(i => i.id !== id);
  }
}

export default new CartStore();

import { makeAutoObservable, reaction } from 'mobx';

class RouterStore {
  currentPath = window.location.pathname;
  params = {};

  constructor() {
    makeAutoObservable(this);

    // 监听路由变化
    reaction(
      () => this.currentPath,
      (path, previousPath) => {
        console.log(`Navigation: ${previousPath} -> ${path}`);
        this.handleRouteChange(path);
      }
    );

    // 监听 popstate 事件
    window.addEventListener('popstate', () => {
      this.currentPath = window.location.pathname;
    });
  }

  handleRouteChange(path) {
    // 根据路径加载不同内容
    switch (path) {
      case '/':
        this.loadHomePage();
        break;
      case '/about':
        this.loadAboutPage();
        break;
      default:
        this.loadNotFoundPage();
    }
  }

  navigate(path) {
    window.history.pushState({}, '', path);
    this.currentPath = path;
  }

  loadHomePage() { }
  loadAboutPage() { }
  loadNotFoundPage() { }
}

export default new RouterStore();

import { makeAutoObservable, reaction } from 'mobx';

class ThemeStore {
  theme = localStorage.getItem('theme') || 'light';

  constructor() {
    makeAutoObservable(this);

    // 监听主题变化，更新 DOM 和保存设置
    reaction(
      () => this.theme,
      (theme) => {
        document.documentElement.setAttribute('data-theme', theme);
        localStorage.setItem('theme', theme);
      },
      { fireImmediately: true }
    );
  }

  toggleTheme() {
    this.theme = this.theme === 'light' ? 'dark' : 'light';
  }

  setTheme(theme) {
    this.theme = theme;
  }
}

export default new ThemeStore();

reaction(
  () => ({
    count: store.count,
    name: store.name,
    active: store.active
  }),
  ({ count, name, active }) => {
    console.log('State changed:', { count, name, active });
  }
);

reaction(
  () => store.isLoggedIn ? store.user.id : null,
  (userId) => {
    if (userId) {
      loadUserData(userId);
    }
  }
);

reaction(
  () => store.data,
  async (data) => {
    try {
      await saveData(data);
    } catch (error) {
      console.error('Save failed:', error);
    }
  }
);