Flux 中的 AJAX：依赖状态更改时刷新存储

使用 Flux 中的 AJAX：依赖状态更改时刷新存储

javascript
// 引入 Flux 相关库
import { Dispatcher } from 'flux';
import { EventEmitter } from 'events';
// 创建分发器实例
const dispatcher = new Dispatcher();
// 创建 TodoStore 存储
class TodoStore extends EventEmitter {
  constructor() {
    super();
    this.todos = []; // 存储任务的数组
  }
  // 获取当前任务列表
  getTodos() {
    return this.todos;
  }
  // 添加新任务的方法
  addTodo(task) {
    this.todos.push(task);
    // 发送操作到分发器，通知状态更改
    dispatcher.dispatch({ type: 'ADD_TODO' });
  }
  // 监听分发器的操作
  handleActions(action) {
    if (action.type === 'ADD_TODO') {
      // 在这里触发 AJAX 请求，假设使用 fetch API
      fetch('/api/addTodo', {
        method: 'POST',
        body: JSON.stringify({ task: this.todos[this.todos.length - 1] }),
        headers: { 'Content-Type': 'application/json' },
      })
        .then(response => response.json())
        .then(data => {
          // 请求完成后更新存储的数据
          this.todos = data;
          this.emit('change'); // 发送 change 事件，通知视图更新
        })
        .catch(error => console.error('Error:', error));
    }
  }
}
// 创建存储实例
const todoStore = new TodoStore();
// 注册存储的操作处理方法
dispatcher.register(todoStore.handleActions.bind(todoStore));
// 监听存储的 change 事件，更新视图
todoStore.on('change', () => {
  console.log('TodoList 更新:', todoStore.getTodos());
});
// 添加新任务
todoStore.addTodo('完成 Flux 整合 AJAX 示例');