Flux는 클라이언트 측 웹 애플리케이션의 애플리케이션 아키텍처를 구축하고 단방향 데이터 흐름 형태로 공개 상태를 관리하는 데 사용되는 공개 상태 관리 솔루션입니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.
flux란 무엇입니까
flux는 vuex in React와 유사한 공개 상태 관리 솔루션으로, 단방향 데이터 흐름관리를 활용하여 클라이언트 웹 애플리케이션을 구축하기 위해 Facebook에서 공식적으로 제공하는 애플리케이션 아키텍처입니다.
형식의 공개 상태입니다. 공식 프레임워크라기보다는 패턴에 가깝습니다. 개발자는 새로운 코드를 너무 많이 요구하지 않고도 Flux를 빠르게 시작할 수 있습니다.cnpm i flux -S 的方式进行安装。
flux的组成
View：视图层
Action：视图发出的消息
Dispatcher：派发者，用来接收Action，执行回调函数
Store：数据层，存放状态，一旦发生改动，
flux的工作流程
Flux 的最大特点，就是数据的"单向流动"。
用户访问 View
View 发出用户的 Action
Dispatcher 收到 Action，要求 Store 进行相应的更新
Store 更新后，发出一个"change"事件
View 收到"change"事件后，更新页面
上面过程中，数据总是"单向流动"，任何相邻的部分都不会发生数据的"双向流动"。这保证了流程的清晰。
读到这里，你可能感到一头雾水，OK，这是正常的。接下来，我会详细讲解每一步。
请打开 Demo 的首页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的源码很简单。
// components/MyButtonController.jsx
var 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.jsx
var 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都是一个对象，包含一个actionType属性（说明动作的类型）和一些其他属性（用来传递数据）。
在这个Demo里面，ButtonActions 对象用于存放所有的Action。
// actions/ButtonActions.js
var AppDispatcher = require('../dispatcher/AppDispatcher');
var ButtonActions = {
addNewItem: function (text) {
AppDispatcher.dispatch({
actionType: 'ADD_NEW_ITEM',
text: text
});
},
};上面代码中，ButtonActions.addNewItem方法使用AppDispatcher，把动作ADD_NEW_ITEM派发到Store。
Dispatcher 的作用是将 Action 派发到 Store、。你可以把它看作一个路由器，负责在 View 和 Store 之间，建立 Action 的正确传递路线。注意，Dispatcher 只能有一个，而且是全局的。
Facebook官方的 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，不应该有其他逻辑。
Store 保存整个应用的状态。它的角色有点像 MVC 架构之中的Model 。
在我们的 Demo 中，有一个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()cnpm i flux -S를 사용하여 설치하세요.
index.jsx를 열면 하나의 컴포넌트만 로드된 것을 볼 수 있습니다. 🎜// 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);
}
});MyButton이 아니라 MyButtonController라는 것을 알 수 있습니다. 왜 그래? 🎜🎜여기서는 React의 컨트롤러 뷰 모드를 사용합니다. "컨트롤러 보기" 구성 요소는 상태를 저장한 다음 이를 하위 구성 요소에 전달하는 데만 사용됩니다. MyButtonController의 소스 코드는 매우 간단합니다. 🎜// 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는 매개변수를 하위 구성 요소인 MyButton에 전달합니다. 후자의 소스 코드는 훨씬 더 간단합니다. 🎜// 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;MyButton은 테스트와 재사용을 용이하게 하는 순수 구성 요소(즉, 상태를 포함하지 않음)임을 알 수 있습니다. 이것이 '컨트롤 뷰' 모드의 가장 큰 장점입니다. 🎜🎜MyButton에는 사용자가 this.createNewItem 메서드를 클릭하면 해당 메서드를 호출하고 Dispatcher에 작업을 보내는 로직이 하나만 있습니다. 🎜rrreee🎜위 코드에서 createNewItem 메서드를 호출하면 addNewItem이라는 작업이 트리거됩니다. 🎜actionType 속성(액션 유형 설명)과 기타 속성(데이터 전달에 사용됨)을 포함하는 개체입니다. 🎜🎜이 데모에서는 ButtonActions 개체를 사용하여 모든 작업을 저장합니다. 🎜rrreee🎜위 코드에서 ButtonActions.addNewItem 메서드는 AppDispatcher를 사용하여 ADD_NEW_ITEM 작업을 Store에 전달합니다. 🎜AppDispatcher.js를 작성해야 합니다. 🎜rrreee🎜AppDispatcher.register() 메소드는 다양한 Action 콜백 함수를 등록하는 데 사용됩니다. 🎜rrreee🎜위 코드에서 Dispatcher는 ADD_NEW_ITEM 액션을 수신하면 콜백 함수를 실행하고 ListStore를 작동시킵니다. 🎜🎜Dispatcher는 작업을 전달하는 데만 사용되며 다른 논리를 가져서는 안 된다는 점을 기억하세요. 🎜ListStore가 있습니다. 🎜rrreee🎜위 코드에서 ListStore.items는 항목을 저장하는 데 사용되며, ListStore.getAll()은 모든 항목을 읽는 데 사용되며, ListStore.emitChange( )< /code>는 "변경" 이벤트를 발생시키는 데 사용됩니다. 🎜🎜스토어는 변경 후 뷰에 "변경" 이벤트를 보내야 하므로 이벤트 인터페이스를 구현해야 합니다. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// stores/ListStore.js
var EventEmitter = require(&#39;events&#39;).EventEmitter;
var assign = require(&#39;object-assign&#39;);
var ListStore = assign({}, EventEmitter.prototype, {
items: [],
getAll: function () {
return this.items;
},
addNewItemHandler: function (text) {
this.items.push(text);
},
emitChange: function () {
this.emit(&#39;change&#39;);
},
addChangeListener: function(callback) {
this.on(&#39;change&#39;, callback);
},
removeChangeListener: function(callback) {
this.removeListener(&#39;change&#39;, callback);
}
});</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><p>上面代码中，<code>ListStore继承了EventEmitter.prototype，因此就能使用ListStore.on()和ListStore.emit()，来监听和触发事件了。Store 更新后（this.addNewItemHandler()）发出事件（this.emitChange()），表明状态已经改变。 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;推荐学习：《react视频教程》
위 내용은 반응에서 플럭스는 무엇을 의미합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
