前端应用的一个重要特性是状态管理。React 为其组件提供了自己的状态管理技术。React 的状态管理仅在组件级别工作。即使组件之间存在父子关系嵌套组件一个组件的状态也不会被另一个组件访问。为了解决这个问题有许多第三方状态管理库如 redux、mobx 等。Flux 是有效管理应用状态的一种技术。Flux 由 Facebook 引入并在它的 Web 应用中广泛使用。Flux 使用单向数据流模式来提供清晰的状态管理。在本章中我们将学习什么是 Flux 以及如何使用它。使用 Flux 管理状态Flux 使用单向数据流模式。它有四个不同的部分Store− 顾名思义所有业务数据都存储在 store 中。Store 执行两个过程。Store 会通过从注册的 dispatcher 收集数据来自行更新其数据。Dispatcher 向 store 提供数据和相关的 action。数据更新后store 会发出 change 数据事件以通知 view 数据已更改。View 会监听 change 事件并在接收到 change 事件时通过从 store 访问更新的数据来更新其视图。Action− Action 只是要处理的操作及其必要数据的表示。View 会根据用户交互创建带有必要数据的 action并将其发送到 dispatcher。例如下面提到的 payload 是由 viewaction creator根据用户交互创建的用于添加用户。{ actionType: add, data: { name: Peter } }上述 action 将被传递给 dispatcher后者会将信息发送到所有注册的 store。Store 会相应地更新数据并向所有与之注册的 view 发送 change 事件。Dispatcher− Dispatcher 接收带有正确 payload 的 action并将其发送到所有注册的 store 以进行进一步处理。View− View 根据用户交互创建 action 并发送到 dispatcher。它与 store 注册以获取更改一旦通过事件接收到更改就会用新数据更新自身。为了 Flux 的高效工作需要初始化以下几项应用应使用适当的 action 及其 callback 初始化 dispatcher。Store 应初始化并与 dispatcher 注册以接收数据更新。View 应使用 dispatcher 和 store 初始化。View 应注册以监听 store 的更改事件。Flux 架构的工作流程如下用户交互并在 view 中触发事件。View 处理事件并根据用户操作创建 action。View 将 action 发送到 dispatcher。Dispatcher 将 action 发布到所有与之注册的 store。注册的 store 会接收带有 payload 的 action。Store 会根据 action 更新自身。Store 会向 view 发出 change 事件。监听 store 更改的 view 会使用更新后的数据更新前端。应用 Flux在本节中让我们创建一个新的 React 应用来学习如何应用 Flux 概念。首先使用以下命令创建一个新的 React 应用并启动它。create-react-app myapp cd myapp npm start接下来使用 npm 安装 flux 包如下所示 −npm install flux --save接下来打开App.css(src/App.css) 并移除所有 CSS 类。Dispatcher.js接下来创建一个 Flux dispatcher即 Dispatcher (src/Flux/Dispatcher.js)如下所示 −import {Dispatcher} from flux; export default new Dispatcher();在这里我们从 flux 包中创建了一个新的 dispatcher。UserActions.js接下来创建 actions和 action creator即UserActions(src/Flux/UserActions.js)如下所示 −import dispatcher from ./Dispatcher; export const USER_ACTIONS { ADD: addUser }; export function addUser(userName) { dispatcher.dispatch({ type: USER_ACTIONS.ADD, value: { name: userName } }) }在这里USER_ACTIONS.ADD 是一个常量用于引用用户的添加操作。addUser()是用于创建包含用户数据的 action 并将其分发到 dispatcher 的方法。UserStore.js接下来创建一个 store即UserStore(src/Flux/UserStore.js)如下所示 −import dispatcher from ./Dispatcher; import {EventEmitter} from events; import * as UserActions from ./UserActions; class UserStore extends EventEmitter { constructor() { super(); this.users []; } handleActions(action) { switch (action.type) { case UserActions.USER_ACTIONS.ADD: { this.users.push(action.value); this.emit(storeUpdated); break; } default: { } } } getUsers() { return this.users; } } const userStore new userStore(); dispatcher.register(userStore.handleActions.bind(userStore)); export default userStore;在这里UserStore继承自EventEmitter以发出变化事件。handleActions从 dispatcher 获取用户详情并更新自身this.users。handleActions发出 store 更新事件以通知 views store 已更新。getUsers()方法将返回当前用户列表信息。UserInput.js接下来创建一个用户输入组件 UserInput用于获取新用户信息的组件如下所示 −import React from react; import * as UserActions from ./UserActions; export default class ButtonComponent extends React.Component { constructor(props) { super(props); this.state { username: } } onButtonClick () { UserActions.addUser(this.state.username) }; render() { return ( div input nameusername onChange{(e) this.setState({username: e.target.value})}/ button onClick{() this.onButtonClick()}Add user/button /div ); } }在这里创建一个 input 元素从用户那里获取新用户数据。添加一个按钮将用户信息提交到 UserActions 的 addUser() 方法。addUser将更新用户数据并连同适当的 action type 发送到 dispatcher。Dispatcher 将使用 action type 调用 store。Store 将更新用户列表并通知所有注册的 views。UserList.js接下来创建一个用户列表组件 UserList用于显示 store 中可用用户的组件如下所示 −import React from react; import UserStore from ./UserStore; export default class UserList extends React.Component { constructor(props) { super(props); this.state { users: UserStore.getUsers() } } componentDidMount() { UserStore.on(storeUpdated, this.updateUserList); } componentWillUnmount() { UserStore.removeListener(storeUpdated, this.updateUserList); } updateUserList () { this.setState({users: UserStore.getUsers()}) }; render() { return ( ul{ this.state.users this.state.users.length 0 this.state.users.map((items) li{items.name}/li) } /ul ); } }在这里componentDidMount通过 UserStore.on 方法注册 store 事件storeUpdated。componentWillUnmount通过 UserStore.removeListener 方法注销 store 事件storeUpdated。updateUserList从 store 获取最新的用户数据并更新自身的 state。render方法从其 statethis.state.users渲染用户列表。App.js接下来打开 App 组件 (src/App.js)并使用UserInput和UserList组件如下所示 −import ./App.css import React, { Suspense, lazy } from react; import UserInput from ./Flux/UserInput; import UserList from ./Flux/UserList; function App() { return ( div classNamecontainer div style{{ padding: 10px }} div UserInput / UserList / /div /div /div ); } export default App;在这里UserInput用于从用户获取信息。UserList将从 store 获取最新的用户列表并渲染它。最后在浏览器中打开应用并检查最终结果。最初用户列表将为空。一旦用户输入用户名并提交下面列表将显示更新的用户列表如下所示 −总结Flux 是 React 应用的一种简单、单向的状态管理模式。它有助于降低 React 应用的复杂性。它通过 dispatcher 以透明的方式连接 views 和 stores。React 社区增强了 Flux 模式并发布了大量成熟的状态管理库如 Redux这些库更强大且易于使用。