Flux 架构入门教程--新手必备，过程详解

心已赠人 2022-06-09 10:42 160阅读 0赞

**一、什么是Flux？**

Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西，但是更加简单和清晰

**二、基本概念**

Flux将一个应用分为四个部分

*  View： 视图层
 *  Action（动作）：视图层发出的消息（比如mouseClick）
 *  Dispatcher（派发器）：用来接收Actions、执行回调函数
 *  Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

![Center][]

Flux 的最大特点，就是数据的"单向流动"。

> 1.  用户访问 View
> 2.  View 发出用户的 Action
> 3.  Dispatcher 收到 Action，要求 Store 进行相应的更新
> 4.  Store 更新后，发出一个"change"事件
> 5.  View 收到"change"事件后，更新页面
> 6.

**三、view部分（按照flux的单项流程来）**

打开附件的index.jsx,你会看到只加载了一个组件

// index.jsx var React = require('react'); var ReactDOM = require('react-dom'); var MyButtonController = require('./components/MyButtonController'); ReactDOM.render( <MyButtonController/>, document.querySelector('#example') );

上面代码中，你可能注意到了，组件的名字不是 MyButton，而是 MyButtonController。这是为什么？

这里，我采用的是 React 的 controller view 模式。"controller view"组件只用来保存状态，然后将其转发给子组件。MyButtonController的源码很简单。

我们来看MyButtonController的源码

// components/MyButtonController.jsx var React = require('react'); var ButtonActions = require('../actions/ButtonActions'); var MyButton = require('./MyButton');

我们这里 可以看到， MyButtonController里面只是将最基本的 MyButton拿出来然后加上自己的方法，这样的话，就不会破坏 MyButton组件，而 MyButton作为一个最基本的组件，代码更为简单，下面是 MyButton的源码：

// components/MyButton.jsx var React = require('react'); var MyButton = function(props) { return <div> <button onClick={ props.onClick}>New Item</button> </div>; }; module.exports = MyButton;

这就是调用一个组件的流程了，方便测试与复用，这样的方式便是[controller view][] 模式的最大优点了，当然这只是前台展示的一个组件，当用户点击的时候就会产生逻辑，上面代码我们可以看到，按钮上有一个onclick函数指向createNewItem函数，这个函数就负责将用户的动作发送到ButtonActions里面

**四、Action（这里处理view层发来的用户动作）**

每个Action都是一个对象，包含一个actionType属性（说明动作的类型）和一些其他属性（用来传递数据）。

在附件里面，[ButtonActions][] 对象用于存放所有的Action。

// actions/ButtonActions.js var AppDispatcher = require('../dispatcher/AppDispatcher'); var ButtonActions = { addNewItem: function (text) { AppDispatcher.dispatch({ actionType: 'ADD_NEW_ITEM', text: text }); }, };

可以看到，我们使用了 addItem函数，这个函数里面用到了 AppDispatcher，它的作用是将类型为 ADD\_NEW\_ITEM的动作派发到store

**五、Dispatcher（派发器）**

Dispatcher的作用是将 Action 派发到 Store。你可以把它看作一个路由器，负责在 View 和 Store 之间，建立 Action 的正确传   递路线。

注意，Dispatcher只能有一个，而且是全局的。

首先，在项目中你要写一个[AppDispatcher.js][]，生成Dispatcher 实例：

// dispatcher/AppDispatcher.js var Dispatcher = require('flux').Dispatcher; module.exports = new Dispatcher();

AppDispatcher.register()方法用来登记各种Action的回调函数。

// dispatcher/AppDispatcher.js var ListStore = require('../stores/ListStore'); AppDispatcher.register(function (action) { switch(action.actionType) { case 'ADD_NEW_ITEM': ListStore.addNewItemHandler(action.text); ListStore.emitChange(); break; default: // no op } })

上面代码中，Dispatcher收到ADD\_NEW\_ITEM动作，就会执行回调函数，对ListStore进行操作。

记住，Dispatcher只用来派发 Action，不应该有其他逻辑。

到这里我们基本上就明白这个流程，接下来就是对逻辑带代码的实现了，上面我们将每一种action对应发给不同的store，然后我们就到store做出响应

**六、Store（储存数据的意思）**

Store 保存整个应用的状态。它的角色有点像 MVC 架构之中的Model 。

在我们的 附件 中，有一个[ListStore][]，所有数据都存放在那里。

// stores/ListStore.js var ListStore = { items: [], getAll: function() { return this.items; }, addNewItemHandler: function (text) { this.items.push(text); }, emitChange: function () { this.emit('change'); } }; module.exports = ListStore;

上面代码中，ListStore.items用来保存条目，ListStore.getAll()用来读取所有条目，ListStore.emitChange()用来发出一个"change"事件。

由于 Store 需要在变动后向 View 发送"change"事件，因此它必须实现事件接口。

// stores/ListStore.js var EventEmitter = require('events').EventEmitter; var assign = require('object-assign'); var ListStore = assign({ }, EventEmitter.prototype, { items: [], getAll: function () { return this.items; }, addNewItemHandler: function (text) { this.items.push(text); }, emitChange: function () { this.emit('change'); }, addChangeListener: function(callback) { this.on('change', callback); }, removeChangeListener: function(callback) { this.removeListener('change', callback); } });

上面代码中，ListStore继承了EventEmitter.prototype，因此就能使用ListStore.on()和ListStore.emit()，来监听和触发事件了。

Store 更新后（this.addNewItemHandler()）发出事件（this.emitChange()），表明状态已经改变。View监听到这个事件，就可以查询新的状态，更新页面了。

**七、回到View层**

现在，我们再回过头来修改 [View][] ，让它监听 Store 的 change 事件

// components/MyButtonController.jsx var React = require('react'); var ListStore = require('../stores/ListStore'); var ButtonActions = require('../actions/ButtonActions'); var MyButton = require('./MyButton'); var MyButtonController = React.createClass({ getInitialState: function () { return { items: ListStore.getAll() }; }, componentDidMount: function() { ListStore.addChangeListener(this._onChange); }, componentWillUnmount: function() { ListStore.removeChangeListener(this._onChange); }, _onChange: function () { this.setState({ items: ListStore.getAll() }); }, createNewItem: function (event) { ButtonActions.addNewItem('new item'); }, render: function() { return <MyButton items={ this.state.items} onClick={ this.createNewItem} />; } });

上面代码中，你可以看到当MyButtonController 发现 Store 发出 change 事件，就会调用 this.\_onChange 更新组件状态，从而触发重新渲染。

// components/MyButton.jsx var React = require('react'); var MyButton = function(props) { var items = props.items; var itemHtml = items.map(function (listItem, i) { return <li key={ i}>{ listItem}</li>; }); return <div> <ul>{ itemHtml}</ul> <button onClick={ props.onClick}>New Item</button> </div>; }; module.exports = MyButton;

附件： [Fluxdemo][]

[Center]: /images/20220609/d334f2741c714a0a8d7d39c117908918.png
[controller view]: http://blog.andrewray.me/the-reactjs-controller-view-pattern/
[ButtonActions]: https://github.com/ruanyf/extremely-simple-flux-demo/blob/master/actions/ButtonActions.js
[AppDispatcher.js]: https://github.com/ruanyf/extremely-simple-flux-demo/blob/master/dispatcher/AppDispatcher.js
[ListStore]: https://github.com/ruanyf/extremely-simple-flux-demo/blob/master/stores/ListStore.js
[View]: https://github.com/ruanyf/extremely-simple-flux-demo/blob/master/components/MyButtonController.jsx
[Fluxdemo]: https://github.com/caigongda/Fluxdemo.git