React 用 Flux 怎么管理状态？-编程阁

前端应用的一个重要特性是状态管理。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 是由 view（action 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 name="username" 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方法从其 state（this.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 className="container"> <div style={{ padding: "10px" }}> <div> <UserInput /> <UserList /> </div> </div> </div> ); } export default App;

在这里，