9、Flux 架构中的动作创建与异步处理

Flux 架构中的动作创建与异步处理

1. 动作创建与使用

在 Flux 架构中，我们可以将已实现的存储和动作应用到应用的 main.js 模块中。以下是具体示例代码：

import taskStore from './stores/task';
import { loadTasks } from './actions/load-tasks';
import { runTask } from './actions/run-task';

// 记录存储的状态，以字符串映射数组的形式
taskStore.on('change', (state) => {
  console.log('tasks',
    state.map(x => `${x.name} (${x.state})`));
});

loadTasks();
// →
// tasks [
//   "Task 1 (running)",
//   "Task 2 (queued)",
//   "Task 3 (finished)"
// ]

runTask();
// →
// tasks [
//   "Task 1 (running)",
//   "Task 2 (running)",
//   "Task 3 (finished)"
// ]

从上述代码可以看出，通过调用 loadTasks() 函数，任务被成功加载到存储中；调用 runTask() 函数后，第二个任务的状态得到更新。

2.