翻譯自?http://www.jackcallister.com/2015/02/26/the-flux-quick-start-guide.html

2015年2月26日

本文將概述如何使用Flux模式構建JavaScript應用程序。讓您熟悉核心助焊劑概念的材料是最少的。您應該跟隨隨附的入門工具包。您將需要對React的基本了解，并且最好是構建組件的一些經驗。如果您不熟悉React，請閱讀“React快速入門指南”。

---

概念

Flux是實現用戶界面的架構模式。它有三個主要概念;?Views , Stores and the Dispatcher （視圖層，狀態存儲器和分發器）。還有幾個次要概念;?Actions , Action Types , Action Creators and Web Utils?

（動作，動作的類型，動作的創建者和Web組件）。

花點時間閱讀以下定義，然后按照教程。再次閱讀定義，您將可以在自己的應用程序中開始使用Flux模式。

主要概念

視圖是React組件。他們負責渲染接口和處理用戶事件。他們的數據是從狀態存儲器獲得的。

狀態存儲器管理數據。單個存儲管理單個域的數據。當狀態存儲器更改其數據時，它通知視圖。

該分發器接收新的數據，并將其傳遞到狀態存儲器。狀態存儲器更新其數據（如適用）并通知視圖。

次要概念

動作是傳遞給調度程序的對象。它們包含新數據和Action Type。

動作類型是系統可以創建的操作。僅當出現特定動作類型的操作時，狀態存儲器才更新其數據。

動作創建者是構建Actions并將其發送到Dispatcher或Web Utils的對象。

Web組件是與外部API進行通信的對象。例如，Action Creator可以調用從服務器請求新數據。

---

有很多要一次吸收。我非常建議跟隨入門工具包，并打印出每行，以達到最佳的理解。

免責聲明：忽略常量和Web Utils的使用。這使得了解Flux更簡單，一旦您已經閱讀了官方示例的模式，將填寫這些次要概念。

查看

獲取入門工具包設置（說明在狀態存儲器中）后，您將在目錄app.js中找到以下文件src。

var React = require('react'); var Comments = require('./views/comments'); var CommentForm = require('./views/comment-form');var App = React.createClass({render: function() {return (<div><Comments /><CommentForm /></div>);} });React.render(<App />, document.getElementById('app'));

這使我們對DOM的意見。忽略Comments視圖并專注于實現CommentForm。

var React = require('react');var CommentActionCreators = require('../actions/comment-action-creators');var CommentForm = React.createClass({onSubmit: function(e) {var textNode = this.refs.text.getDOMNode();var text = textNode.value;textNode.value = '';CommentActionCreators.createComment({text: text});},render: function() {return (<div className='comment-form'><textarea ref='text' /><button onClick={this.onSubmit}>Submit</button></div>);} });module.exports = CommentForm;

在CommentForm需要一個CommentActionCreators對象，它是（顧名思義）的動作的創造者。

在表單提交中，createComment函數傳遞一個comment從textarea值構造的對象。讓我們來構建這個Action Creator來接受評論。

---

動作

在actions目錄下創建并實現以下comment-action-creators.js文件。

var AppDispatcher = require('../dispatcher/app-dispatcher');module.exports = {createComment: function(comment) {var action = {actionType: "CREATE_COMMENT",comment: comment};AppDispatcher.dispatch(action);} };

該createComment函數構建一個Action，其中包含Action類型和注釋數據。此操作將傳遞給調度程序的dispatch功能。

我們來構建調度程序來接受動作。

注意：我們可以在View中直接與調度程序進行通信。但是，最佳做法是使用Action Creator。它解除了我們的關注，并為Dispatcher提供了一個接口。

---

分發器

在dispatcher目錄下，創建并實現以下app-dispatcher.js文件。

var Dispatcher = require('flux').Dispatcher;module.exports = new Dispatcher();

來自Flux庫的單個Dispatcher提供了該dispatch功能。已接收的操作將傳遞給所有已注冊的回調。這些回調是從狀態存儲器提供的。

注意：由于Dispatcher實現被隱藏，因此這是一個到源的鏈接。

---

狀態存儲器

在stores目錄下，創建并實現以下comment-store.js文件。

var AppDispatcher = require('../dispatcher/app-dispatcher');var EventEmitter = require('events').EventEmitter; var assign = require('object-assign');var comments = [];var CommentStore = assign({}, EventEmitter.prototype, {emitChange: function() {this.emit('change');},addChangeListener: function(callback) {this.on('change', callback);},removeChangeListener: function(callback) {this.removeListener('change', callback);},getAll: function() {return comments;} });AppDispatcher.register(function(action) {switch(action.actionType) {case "CREATE_COMMENT":comments.push(action.comment);CommentStore.emitChange();break;default:} });module.exports = CommentStore; 有兩段代碼;?狀態存儲器創建和狀態存儲器注冊（與調度程序）。

通過合并EventEmitter.prototype對象和自定義對象創建狀態存儲器，類似于Dispatcher創建。該EventEmitter.prototype能訂閱回調后的事件，并讓狀態存儲器發出事件。

自定義對象定義用于訂閱和取消訂閱change事件的公共功能。它還定義了getAll返回comments數據的函數。

接下來，Store將向Dispatcher注冊一個函數。當Dispatcher調用dispatch它將其參數（即Action）傳遞給每個已注冊的回調函數。

在這種情況下，當使用Action Type?調用Action時CREATE_COMMENT，CommentStore將將數據推入其注釋數組并調用該emitChange函數。

---

現在我們需要一個視圖來顯示狀態存儲器的評論并訂閱更改。

在views目錄中查找comments.js文件。修改它以匹配以下。

var React = require('react');var CommentStore = require('../stores/comment-store');function getStateFromStore() {return {comments: CommentStore.getAll()} }var Comments = React.createClass({onChange: function() {this.setState(getStateFromStore());},getInitialState: function() {return getStateFromStore();},componentDidMount: function() {CommentStore.addChangeListener(this.onChange);},componentWillUnmount: function() {CommentStore.removeChangeListener(this.onChange);},render: function() {var comments = this.state.comments.map(function(comment, index) {return (<div className='comment' key={'comment-' + index}>{comment.text}</div>)});return (<div className='comments'>{comments}</div>);}, });module.exports = Comments;

大多數這是熟悉的React代碼，增加了需要CommentStore和幾個Store相關的附加功能。

該getStateFromStores功能從狀態存儲器檢索評論數據。這被設置為其中的初始組件狀態getInitialState。

里面componentDidMount的onChange函數傳遞到存儲的addChangeListener功能。當狀態存儲器發出的change事件onChange現在將觸發，將組件的狀態設置為已更新的存儲數據。

最后從狀態存儲器componentWillUnmount中刪除該onChange功能。

---

結論

我們現在有一個工作的Flux應用程序，并觸及了模式的每個核心概念;??Views , Stores and the Dispatcher （視圖層，狀態存儲器和分發器）。

• 當用戶提交評論時，視圖調用Action Creator。
• Action Creator構建一個Action并將其傳遞給Dispatcher。
• Dispatcher將Action發送到已注冊的Store回調。
• Stores更新其注釋的數據并發出更改事件。
• 視圖從Stores更新其狀態并重新呈現。

這是Flux的精髓。Dispatcher將數據發送到更新并通知其Views的所有Stores。

此時，Flux仍然會感覺到一點陌生。我高度推薦閱讀官方文檔，并觀看Flux談話的介紹，以更深入地了解Flux架構并進一步強化格局。我也建議現在閱讀正式的例子。

轉載于:https://www.cnblogs.com/fengnovo/p/6897255.html

總結

以上是生活随笔為你收集整理的Flux快速入门指南的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。