React - 使用 Flux 管理状态

Quiz

前端应用的一个重要特性是状态管理。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;

在这里，

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

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

总结

Flux 是 React 应用的一种简单、单向的状态管理模式。它有助于降低 React 应用的复杂性。它通过 dispatcher 以透明的方式连接 views 和 stores。React 社区增强了 Flux 模式，并发布了大量成熟的状态管理库（如 Redux），这些库更强大且易于使用。

笙亿网络策划

React 用 Flux 怎么管理状态？

React - 使用 Flux 管理状态

使用 Flux 管理状态

应用 Flux

Dispatcher.js

UserActions.js

UserStore.js

UserInput.js

UserList.js

App.js

总结

React 用 Flux 怎么管理状态？

React - 使用 Flux 管理状态

使用 Flux 管理状态

应用 Flux

Dispatcher.js

UserActions.js

UserStore.js

UserInput.js

UserList.js

App.js

总结

相关问答