📜  Redux 和 Flux 架构(1)

📅  最后修改于: 2023-12-03 15:04:52.756000             🧑  作者: Mango

Redux 和 Flux 架构

Redux 和 Flux 都是 JavaScript 应用程序的状态管理架构。它们都提供了管理应用程序的数据流的模式,并且可以使应用程序更容易开发,测试和扩展。

Flux 架构

Flux 架构是 Facebook 提出的一种应用程序的数据流模式。它具有以下几个核心概念:

1. 单向数据流

Flux 架构中,数据流只能从一个方向流动,即从 Dispatcher 到 Store,再到 View。

2. Dispatcher

Dispatcher 是 Flux 架构中的核心部分,用于将操作分发给 Store。多个 Store 可以注册到同一个 Dispatcher 中。

3. Store

Store 是 Flux 架构中存储和管理应用程序状态的地方。它们接收来自 Dispatcher 的操作,并更新它们的状态。Store 还可以在状态改变时触发事件。

4. View

View 是 Flux 架构中的界面,用于展示 Store 中的状态。它们通常是 React 组件,可以监听 Store 中状态的变化,并重新渲染视图。

5. Action

Action 是 Flux 架构中的操作,它们通过 Dispatcher 发送到 Store。它们只包含用于描述操作的数据,不包含任何逻辑。

Redux 架构

Redux 架构是基于 Flux 架构的一种优化,它具有以上所有核心概念,但还引入了一些新的概念:

1. 单一状态树

Redux 架构中,所有的应用程序状态都存储在一个单一的对象中,称为“状态树”。这就是 Redux 架构的“单一真相源头”。

2. Reducer

Reducer 是 Redux 架构中的 Store。它们接收来自 Action 的操作,并返回新的状态。Reducer 必须是纯函数,即相同的输入始终产生相同的输出,而不引起任何副作用。

3. 中间件

Redux 中间件是在发起 Action 和达到 Reducer 之间的代码,它可以拦截和处理 Action。Redux 中间件常用于异步处理,日志记录和其他副作用。

4. 异步 Action

Redux 架构中的 Action 可以是异步的,这使得 Redux 更容易处理网络请求和其它异步操作。

5. 派遣器

Redux 架构中没有单独的 Dispatcher 概念。派遣器是 Redux 的基础,用于在 Action 被发起向一组 Reducer 分发它们。

总结

Flux 和 Redux 架构都是应用程序数据流模式的实现方式。共同点是通过单向数据流管理应用程序状态,而不是让应用程序状态树和逻辑散布在系统的各个部分。不同之处在于 Redux 架构引入了一些新的概念,例如单一状态树和中间件,使应用程序更容易进行维护和扩展。


# Redux 和 Flux 架构

Redux 和 Flux 都是 JavaScript 应用程序的状态管理架构。它们都提供了管理应用程序的数据流的模式,并且可以使应用程序更容易开发,测试和扩展。

## Flux 架构

Flux 架构是 Facebook 提出的一种应用程序的数据流模式。它具有以下几个核心概念:

- 单向数据流
- Dispatcher
- Store
- View
- Action

### 单向数据流

Flux 架构中,数据流只能从一个方向流动,即从 Dispatcher 到 Store,再到 View。

### Dispatcher

Dispatcher 是 Flux 架构中的核心部分,用于将操作分发给 Store。多个 Store 可以注册到同一个 Dispatcher 中。

### Store

Store 是 Flux 架构中存储和管理应用程序状态的地方。它们接收来自 Dispatcher 的操作,并更新它们的状态。Store 还可以在状态改变时触发事件。

### View

View 是 Flux 架构中的界面,用于展示 Store 中的状态。它们通常是 React 组件,可以监听 Store 中状态的变化,并重新渲染视图。

### Action

Action 是 Flux 架构中的操作,它们通过 Dispatcher 发送到 Store。它们只包含用于描述操作的数据,不包含任何逻辑。

## Redux 架构

Redux 架构是基于 Flux 架构的一种优化,它具有以上所有核心概念,但还引入了一些新的概念:

- 单一状态树
- Reducer
- 中间件
- 异步 Action
- 派遣器

### 单一状态树

Redux 架构中,所有的应用程序状态都存储在一个单一的对象中,称为“状态树”。这就是 Redux 架构的“单一真相源头”。

### Reducer

Reducer 是 Redux 架构中的 Store。它们接收来自 Action 的操作,并返回新的状态。Reducer 必须是纯函数,即相同的输入始终产生相同的输出,而不引起任何副作用。

### 中间件

Redux 中间件是在发起 Action 和达到 Reducer 之间的代码,它可以拦截和处理 Action。Redux 中间件常用于异步处理,日志记录和其他副作用。

### 异步 Action

Redux 架构中的 Action 可以是异步的,这使得 Redux 更容易处理网络请求和其它异步操作。

### 派遣器

Redux 架构中没有单独的 Dispatcher 概念。派遣器是 Redux 的基础,用于在 Action 被发起向一组 Reducer 分发它们。

## 总结

Flux 和 Redux 架构都是应用程序数据流模式的实现方式。共同点是通过单向数据流管理应用程序状态,而不是让应用程序状态树和逻辑散布在系统的各个部分。不同之处在于 Redux 架构引入了一些新的概念,例如单一状态树和中间件,使应用程序更容易进行维护和扩展。