ReactJS101 项目解读：深入理解 Flux 架构模式-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01131/article/details/148527183

ReactJS101 项目解读：深入理解 Flux 架构模式

reactjs101 kdchang/reactjs101: 是一个关于 ReactJS 的前端开发教程项目。适合对前端开发有兴趣的人，特别是想学习 ReactJS 框架的人。特点是从基础概念和示例代码入手，逐步深入到 ReactJS 的各种高级特性，具有较强的实践性和指导性。项目地址: https://gitcode.com/gh_mirrors/re/reactjs101

引言：为什么需要 Flux？

在 React 应用开发中，随着应用规模的增长，组件间的状态管理会变得日益复杂。传统的父子组件通过 props 传递数据的模式在处理跨组件状态共享时显得力不从心。Facebook 提出的 Flux 架构正是为了解决这类状态管理难题而诞生的设计模式。

Flux 核心概念解析

1. 单向数据流（Unidirectional Data Flow）

Flux 最核心的设计理念就是单向数据流，这与 React 的单向数据绑定理念高度契合。数据流动方向始终是： Action → Dispatcher → Store → View

2. Flux 四大核心组件

(1) Actions/Action Creator

职责：定义所有可能改变应用状态的行为
特点：
- 每个 action 都是一个纯对象
- 必须包含 type 属性标识动作类型
- 可以携带 payload 数据
示例：

{
  type: 'ADD_TODO',
  payload: {
    text: '学习Flux架构'
  }
}

(2) Dispatcher

特点：
- 整个应用只有一个全局 Dispatcher
- 负责将 action 分发给所有注册的 Store
- 确保没有依赖关系的 Store 能有序更新

(3) Stores

职责：
- 存储应用状态和业务逻辑
- 响应 Dispatcher 分发的 action
- 通知 View 层状态变更
重要原则：
- 只提供 getter 方法读取状态
- 修改状态必须通过 action 触发

(4) Views

职责：
- 监听 Store 的状态变化
- 重新渲染 UI
- 触发用户交互产生的 action

Flux 工作流程详解

初始化阶段：
- Stores 向 Dispatcher 注册回调
- Views 从 Stores 获取初始状态
- Views 订阅 Store 的变化通知
用户交互阶段：
- 用户操作触发 Action Creator
- Action Creator 创建 action 并发送给 Dispatcher
- Dispatcher 将 action 分发给所有 Store
- 相关 Store 更新状态并发出变更事件
- 订阅了该 Store 的 View 重新获取数据并更新 UI

实战：Todo应用开发

项目结构设计

src/
├── actions/        # Action定义
├── components/     # React组件
├── constants/      # 常量定义
├── dispatcher/     # Dispatcher实现
├── stores/         # 状态存储
└── index.js        # 应用入口

关键实现细节

1. Dispatcher 实现

使用 Facebook 提供的 Dispatcher 库作为基础，扩展自定义功能：

import { Dispatcher } from 'flux';

class AppDispatcher extends Dispatcher {
  handleAction(action) {
    this.dispatch({
      type: action.type,
      payload: action.payload
    });
  }
}

export default new AppDispatcher();

2. Store 实现

结合 EventEmitter 实现状态变更通知：

import { EventEmitter } from 'events';

class TodoStore extends EventEmitter {
  constructor() {
    super();
    this.todos = [];
  }
  
  // 添加变更监听器
  addChangeListener(callback) {
    this.on('CHANGE', callback);
  }
  
  // 获取当前状态
  getAll() {
    return this.todos;
  }
}

const todoStore = new TodoStore();

// 注册Dispatcher回调
AppDispatcher.register((action) => {
  switch(action.type) {
    case 'ADD_TODO':
      todoStore.todos.push(action.payload.text);
      todoStore.emit('CHANGE');
      break;
  }
});

export default todoStore;

3. 组件集成

class TodoApp extends React.Component {
  componentDidMount() {
    todoStore.addChangeListener(this._onChange);
  }
  
  _onChange = () => {
    this.setState({ todos: todoStore.getAll() });
  }
  
  render() {
    return (
      <div>
        <TodoInput />
        <TodoList items={this.state.todos} />
      </div>
    );
  }
}