ReactJS - 使用Flux管理状态

前端应用程序的一个重要功能是状态管理。React 拥有自己的组件状态管理技术。React状态管理仅在组件级别起作用。即使组件之间存在父子关系（嵌套组件），一个组件的状态也不会被另一个组件访问。为了克服这个问题，有很多第三方状态管理库，例如redux、mobx等。

Flux是一种有效管理应用程序状态的技术。Flux由Facebook引入，并在其Web应用程序中广泛使用。Flux使用单向数据流模式来提供清晰的状态管理。让我们在本节中学习什么是Flux以及如何在React中使用它。

使用Flux管理状态

Flux使用单向数据流模式。它有四个不同的部分：

存储（Store） -顾名思义，所有业务数据都存储在存储中。存储执行两个过程。

存储会通过从注册的调度器收集数据来自行更新其数据。调度器向存储提供数据和相关操作。
数据更新后，存储会发出更改数据事件以通知视图数据已更改。视图将监听更改事件，并在收到更改事件后通过访问存储中的更新数据来更新其视图。

操作（Action） -操作只是要处理的操作的表示，以及必要的数据。视图将根据用户交互创建包含必要数据的操作，并将其发送到调度器。例如，以下提到的有效负载是由视图（操作创建器）根据用户交互创建的，用于添加用户。

{
   actionType: "add",
   data: {
      name: "Peter"
   }
}

上述操作将传递给调度器，调度器会将信息发送给所有已注册的存储。存储将相应地更新数据，并将更改事件发送给所有已注册的视图。

调度器（Dispatcher） -调度器接收具有正确有效负载的操作，并将其发送到所有已注册的存储以进行进一步处理。

视图（View） -视图根据用户交互创建操作并将其发送到调度器。它向存储注册以获取更改，并在通过事件接收到更改后，将使用新数据更新自身。

为了使Flux有效工作，需要初始化一些内容，如下所示：

应用程序应使用正确的操作及其回调初始化调度器。
存储应初始化并向调度器注册以接收数据更新。
视图应使用调度器和存储初始化。视图应注册以监听存储更改（事件）。

Flux架构的工作流程如下：

用户交互并在视图中触发事件。
视图处理事件并根据用户的操作创建操作。
视图将操作发送到调度器。
调度器将其发布到所有已注册的存储。
已注册的存储将收到带有有效负载的操作。存储将根据操作更新自身。
存储会向视图发出更改事件。
侦听存储更改的视图将使用更新的数据更新前端。

应用Flux

让我们创建一个新的React应用程序来学习如何在这一部分中应用Flux的概念。首先，使用以下命令创建一个新的React应用程序并启动它。

create-react-app myapp
cd myapp
npm start

接下来，使用npm安装Flux包，如下所示：

npm install flux --save

接下来，打开App.css（src/App.css）并删除所有CSS类。接下来，创建一个Flux调度器，Dispatcher（src/Flux/Dispatcher.js），如下所示：

import {Dispatcher} from "flux";
export default new Dispatcher();

在这里，我们从Flux包创建了一个新的调度器。接下来，创建操作（和操作创建器），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()是用于创建操作以及用户数据并将创建的操作分派到调度器的方法。

接下来，创建一个存储，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从调度器检索用户详细信息并更新自身（this.users）。
handleActions发出存储更新事件以通知视图存储已更新。
getUsers()方法将返回当前用户列表信息。

接下来，创建一个用户输入组件，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>
      );
   }
}

这里：

创建一个输入元素以从用户获取新用户数据。
添加一个按钮以将用户信息提交到UserActions的addUser()方法
addUser将更新用户数据并将其与正确的操作类型一起发送到调度器。调度器将使用操作类型调用存储。存储将更新用户列表并通知所有已注册的视图。

接下来，创建一个用户列表组件，UserList组件以显示存储中可用的用户，如下所示：

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方法注册存储事件（storeUpdated）。
componentWillUnmount通过UserStore.removeListener方法注销存储事件（storeUpdated）。
updateUserList从存储获取最新的用户数据并更新其自身存储。
render方法从其状态（this.state.users）渲染用户列表。

接下来，打开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;

这里：

UserInput将用于从用户获取信息。
UserList将从存储获取最新的用户列表并渲染它。

最后，在浏览器中打开应用程序并检查最终结果。最初，用户列表将为空。一旦用户输入用户名并提交，以下列表将显示更新后的用户列表，如下所示：

总结

Flux是一种简单、单向的状态管理模式，适用于React应用程序。它有助于降低React应用程序的复杂性。它以透明的方式通过调度器连接视图和存储。React社区增强了Flux模式并发布了许多成熟的状态管理库（如redux），这些库功能更强大且易于使用。

打印页面