在react中，flux是一个公共状态管理方案，是用来构建客户端web应用的应用架构，利用数据的单向流动的形式对公共状态进行管理。
本教程操作环境：windows7系统、react17.0.1版、dell g3电脑。
什么是flux
flux 是 react 中的类似于 vuex 的公共状态管理方案，它是 facebook 官方给出的用来构建客户端web应用的应用架构，利用数据的单向流动的形式对公共状态进行管理。
它更像一个模式而不是一个正式的框架，开发者不需要太多的新代码就可以快速的上手flux。
使用 cnpm i flux -s 的方式进行安装。
flux的组成
view：视图层
action：视图发出的消息
dispatcher：派发者，用来接收action，执行回调函数
store：数据层，存放状态，一旦发生改动，
flux的工作流程
flux 的最大特点，就是数据的单向流动。
用户访问 view
view 发出用户的 action
dispatcher 收到 action，要求 store 进行相应的更新
store 更新后，发出一个change事件
view 收到change事件后，更新页面
上面过程中，数据总是单向流动，任何相邻的部分都不会发生数据的双向流动。这保证了流程的清晰。
读到这里，你可能感到一头雾水，ok，这是正常的。接下来，我会详细讲解每一步。
view（第一部分）请打开 demo 的首页index.jsx ，你会看到只加载了一个组件。
// index.jsxvar 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的源码很简单。
// components/mybuttoncontroller.jsxvar react = require('react');var buttonactions = require('../actions/buttonactions');var mybutton = require('./mybutton');var mybuttoncontroller = react.createclass({ createnewitem: function (event) { buttonactions.addnewitem('new item'); }, render: function() { return <mybutton onclick={this.createnewitem} />; }});module.exports = mybuttoncontroller;
上面代码中，mybuttoncontroller将参数传给子组件mybutton。后者的源码甚至更简单。
// components/mybutton.jsxvar react = require('react');var mybutton = function(props) { return <div> <button onclick={props.onclick}>new item</button> </div>;};module.exports = mybutton;
上面代码中，你可以看到mybutton是一个纯组件（即不含有任何状态），从而方便了测试和复用。这就是"controll view"模式的最大优点。
mybutton只有一个逻辑，就是一旦用户点击，就调用this.createnewitem 方法，向dispatcher发出一个action。
// components/mybuttoncontroller.jsx // ... createnewitem: function (event) { buttonactions.addnewitem('new item'); }
上面代码中，调用createnewitem方法，会触发名为addnewitem的action。
action每个action都是一个对象，包含一个actiontype属性（说明动作的类型）和一些其他属性（用来传递数据）。
在这个demo里面，buttonactions 对象用于存放所有的action。
// actions/buttonactions.jsvar appdispatcher = require('../dispatcher/appdispatcher');var buttonactions = { addnewitem: function (text) { appdispatcher.dispatch({ actiontype: 'add_new_item', text: text }); },};
上面代码中，buttonactions.addnewitem方法使用appdispatcher，把动作add_new_item派发到store。
dispatcherdispatcher 的作用是将 action 派发到 store、。你可以把它看作一个路由器，负责在 view 和 store 之间，建立 action 的正确传递路线。注意，dispatcher 只能有一个，而且是全局的。
facebook官方的 dispatcher 实现输出一个类，你要写一个appdispatcher.js，生成 dispatcher 实例。
// dispatcher/appdispatcher.jsvar dispatcher = require('flux').dispatcher;module.exports = new dispatcher();
appdispatcher.register()方法用来登记各种action的回调函数。
// dispatcher/appdispatcher.jsvar 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，不应该有其他逻辑。
storestore 保存整个应用的状态。它的角色有点像 mvc 架构之中的model 。
在我们的 demo 中，有一个liststore，所有数据都存放在那里。
// stores/liststore.jsvar 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.jsvar 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.jsxvar 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.jsxvar 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;
推荐学习：《react视频教程》
以上就是react中flux是什么意思的详细内容。