FLUX LÀ GÌ

 - 

Trong ngôn từ bài viết này, tôi thuộc các bạn sẽ cùng cả nhà luận bàn về Flux, rõ ràng về những yếu tố và hoạt động vui chơi của Flux, bên cạnh đó tôi cũng giới thiệu một bài lý giải nhỏ tuổi (tutorial) để xây dựng một module shopping cart dễ dàng và đơn giản bởi Flux. Hãy thuộc tiếp cận bởi hầu hết câu hỏi nhưng mà nhiều người đang đặt ra vào đầu với Flux khi bạn chưa chắc chắn gì về nó

*

Có phải sử dụng Flux không ?

Nếu áp dụng của bạn yêu cầu làm việc cùng với tài liệu động thì câu trả lời là , bạn nên cần sử dụng Flux.

Bạn đang xem: Flux là gì

Nếu ứng dụng của người sử dụng chỉ làm việc với tài liệu tĩnh, ko chia sẻ những tâm lý của áp dụng, không tàng trữ hoặc update dữ liệu, thì câu trả lời là không bởi vì Flux không giúp ích gì cho bạn trong thực trạng này cả +_+

Flux là gì ?

Flux là một trong những phong cách xây dựng nhưng mà Facebook thực hiện trong khi thao tác với React. Flux không hẳn là một trong framework hay 1 tlỗi viện (library). Nó đơn giản và dễ dàng chỉ là một trong hình dáng phong cách thiết kế bắt đầu hỗ trợ thêm cho React, đôi khi desgin ý tưởng phát minh về luồng tài liệu một chiều (Unidirectional Data Flow).

Một bản vẽ xây dựng Flux điển hình là sự phối hợp giữa thỏng viện Dispatcher (được viết vì Facebook) cùng rất Module NodeJS EventEmitter để khiến cho một hệ thống sự khiếu nại (Event System) làm chủ các tâm trạng của ứng dụng.

Cấu trúc của Flux

Nlỗi những quy mô khác (VD: MVC, MVVM, ...), Flux cũng được chia ra các kân hận yếu tố cơ bạn dạng nlỗi sau :

Actions - Làm trọng trách truyền dẫn dữ liệu tới Dispatcher (được coi nlỗi các Helper Method)Dispatcher - Nhận ban bố từ bỏ Actions, truyền cài đặt tài liệu (payload) tới các vị trí đang ĐK nhấn báo cáo.Stores - Là chỗ tàng trữ tinh thần và những logic của hệ thống, trên đây đó là khu vực đã đăng ký dìm tài liệu cùng với Dispatcher.Controller Views - Chính là các React Components, có tác dụng trọng trách dìm những tâm trạng (state) từ bỏ Stores và truyền dữ liệu (dưới dạng props) cho các yếu tố nhỏ.

Mô hình hoạt động

Sơ trang bị tầm thường về dục tình giữa các thành phía bên trong Flux :

Ta rất có thể phát âm đơn giản dễ dàng nhỏng sau :

Views đó là yếu tố có tác dụng trọng trách hiển thị nội dung vận dụng (có thể hiểu giống hệt như nhân tố V vào mô hình MVC).lúc người dùng shop cùng với ứng dụng có tác dụng biến hóa trạng thái (state) của vận dụng (VD: thêm, sửa, xóa dữ liệu cá nhân), View sẽ trải qua Action gửi những thông báo biến đổi tới Dispatcher tất cả có :action_name: tên của Action (VD: ADD_ITEM - thêm sản phẩm vào giỏ hàng).action_payload: thông tin cụ thể văn bản muốn gửi (VD: Object đựng lên tiếng ID, quantity, price, ... của sản phẩm).Sau khi nhận thấy biết tin từ bỏ Action, Dispatcher làm cho trọng trách truyền thiết lập (broadcast) văn bản cảm nhận tới các Store đăng ký lắng nghe sự khiếu nại chuyển đổi từ bỏ trước kia.Store sau khoản thời gian thừa nhận đọc tin, triển khai update dữ liệu (có thể phát âm bài toán update dữ liệu tại đây như là việc update state của Component).Sau Lúc update, Store bắn sự kiện xuống View để triển khai cập nhật hiển thị cho những người sử dụng.Hình như vào sơ vật bên trên còn có một yếu tố API để lấy dữ liệu trường đoản cú Remote Server.

Sơ thứ bên trên bảo đảm an toàn luồng tài liệu dịch rời vào Flux yêu cầu theo một mặt đường một mực.

Xây dựng module shopping cart cùng với Flux

Trong nội dung bài viết này, tôi không đi vượt sâu về định hướng với phân tích cụ thể về Flux. Tôi ao ước triệu tập vào vấn đề tạo một ứng dụng nhỏ tuổi để sở hữu một cái nhìn trực quan liêu rộng về phong thái hoạt động của mô hình Flux.

Để hoàn toàn có thể gọi cùng tiến hành được bài bác chỉ dẫn (tutorial) nho nhỏ dại này, tôi đặt giả thiết chúng ta đã từng có lần làm việc cơ bản cùng với ReactJS :

Đã tạo ra được Hello Word Application bởi JSX.Đã viết được Component như thế nào kia vào React, thế được định nghĩa state cùng props vào Component.Một chăm chú nho nhỏ để phân minh giữa state cùng props đó là lúc state biến hóa thì Component sẽ tiến hành Render lại, còn props thì không.

quý khách rất có thể xem vừa đủ Source của Tutorial này trên đây.

Xem thêm: Retailer Là Gì ? Các Kiểu Cửa Hàng Bán Lẻ Thường Gặp Ở Việt Nam

Bài toán thù đề ra là desgin một module Cart (giỏ hàng) cho phép người dùng tiến hành các làm việc :

Xem công bố những sản phẩm đang có và solo giá chỉ của từng món đồ.Xem thông tin giỏ sản phẩm hiện thời, con số những sản phẩm, giá từng món đồ cùng tổng vốn giao dịch.Các nút ít chức năng triển khai công việc:Thêm sản phẩm vào giỏ sản phẩm (Add).Xóa thành phầm trong giỏ mặt hàng (Remove).Tăng con số (quantity) thành phầm ý muốn download (Increase).Giảm con số (quantity) sản phẩm mong muốn sở hữu (Decrease).

Bức Ảnh của Module lúc hoàn thành như sau :

Trước hết hãy bước đầu cùng với kết cấu tlỗi mục của vận dụng mà họ sắp xây dựng:

dist/ js/ tiện ích.js index.htmlnode_modules/src/ js/ actions/ components/ constants/ dispatcher/ stores/ phầm mềm.js index.htmlgulptệp tin.jspackage.jsonFile package.json bao gồm ngôn từ nhỏng sau:

"name": "react-flux-stores", "version": "1.0.0", "description": "Building simple store with React và Flux", "main": "app.js", "scripts": "test": "gulp" , "repository": "type": "git", "url": "https://github.com/nguyenthanhtung88/react-flux-stores.git" , "keywords": < "react", "flux", "store" >, "author": "Tungshooter", "license": "MIT", "bugs": "url": "https://github.com/nguyenthanhtung88/react-flux-stores/issues" , "homepage": "https://github.com/nguyenthanhtung88/react-flux-stores", "devDependencies": "flux": "^2.0.1", "gulp": "^3.8.11", "gulp-browserify": "^0.5.1", "gulp-concat": "^2.5.2", "react": "^0.13.1", "reactify": "^1.1.0", "underscore": "^1.8.3" Sử dụng npm nhằm thống trị những module tương quan nlỗi gulp, react, flux, underscore. Sau lúc sẽ có package.json bạn chỉ câu hỏi vào thư mục thao tác cùng thực hiện lệnh:

npm installđể setup những module thực hiện đến vận dụng vào tlỗi mục node_modules.

gulpfle.js

var gulp = require("gulp");var browserify = require("gulp-browserify");var conmèo = require("gulp-concat");gulp.task("browserify", function() gulp.src("src/js/app.js") .pipe(browserify(transform: "reactify")) .pipe(concat("ứng dụng.js")) .pipe(gulp.dest("dist/js")););gulp.task("copy", function() gulp.src("src/index.html") .pipe(gulp.dest("dist")););gulp.task("default", <"browserify", "copy">);gulp.task("watch", function() gulp.watch("src/**/*.*", <"default">););Gulp làm cho 2 nhiệm vụ chính:

browserify: bao gồm sự trợ giúp của reactify để chuyển code tự jsx sang js, đôi khi copy app.js sang trọng dist/js.copy: chỉ làm trọng trách copy index.html từ src quý phái dist.

Để thực hiện gulp task, điều trước tiên bạn phải có tác dụng là thiết đặt global gulp:

npm install --global gulpSau đó vào tlỗi mục thao tác với chạy lệnh gulp, lúc ấy những gulp task sẽ tiến hành tự động triển khai theo task default.

do đó bọn họ sẽ hoàn thành bài toán setup các phép tắc trợ giúp cho vấn đề cải cách và phát triển áp dụng. Chúng ta sẽ tất cả trong tay thư viện react, thỏng viện flux. Giờ là thời điểm bước đầu vào chế tạo View với những tác dụng tương quan.

Với hình ảnh vận dụng dứt, ta có thể chia màn hình thành các Component như hình hình ảnh sau:

Từ kia kiến thiết được thỏng mục src/js/components bao gồm các nguyên tố View:

src/ js/ components/ add-to-cart.js cart.js catalog.js decrease.js increase.js main.js remove-from-cart.jsTrong phạm vi nội dung bài viết này tôi xin phép chỉ giới thiệu một luồng hoạt động vui chơi của tác dụng Add To Cart theo quy mô Flux. Với những công dụng Remove sầu From Cart, Increase, Decrease chúng ta sung sướng xem source code để phát âm cụ thể hơn.

Lúc tiến hành Add To Cart, họ sẽ đề xuất thêm thành phầm vào giỏ hàng cùng hiển thị ban bố cho những người cần sử dụng. Hãy bên nhau coi source code của component add-to-cart

var React = require("react");var AppActions = require("../actions/app-actions");var AddToCart = React.createClass( handleClick: function() AppActions.addItem(this.props.item); , render: function() return ( button onClick=this.handleClick>Add To Cart/button> ); );module.exports = AddToCart;Lúc click button Add to lớn cart, kích hoạt addItem sẽ được điện thoại tư vấn, đồng thời truyền theo công bố của thành phầm đang rất được lựa chọn (bên dưới dạng Object). AppActions là nơi đăng ký những kích hoạt của áp dụng cùng chuyển cài đặt báo cáo (payload) cho tới Dispatcher.

Hãy cùng coi src/js/actions/app-actions.js triển khai phần nhiều công việc gì:

var AppConstants = require("../constants/app-constants");var AppDispatcher = require("../dispatcher/app-dispatcher");var AppActions = addItem: function(item) AppDispatcher.handleViewAction( actionType: AppConstants.ADD_ITEM, item: thành phầm ) , removeItem: function(index) AppDispatcher.handleViewAction( actionType: AppConstants.REMOVE_ITEM, index: index ) , increaseItem: function(index) AppDispatcher.handleViewAction( actionType: AppConstants.INCREASE_ITEM, index: index ) , decreaseItem: function(index) AppDispatcher.handleViewAction( actionType: AppConstants.DECREASE_ITEM, index: index ) module.exports = AppActions;Nhỏng bên trên bọn họ đã Call mang lại function addItem của AppActions cố nhiên báo cáo object của sản phẩm nhưng bọn họ chọn. khi này AppActions đang chuyển các ban bố đến Dispatcher:

actionType: tên của kích hoạt, nhằm dễ ợt mang lại việc đánh tên Action họ thống trị trải qua AppConstants(hầu hết nhằm làm chủ các text tĩnh viết tên cho Action):

module.exports = ADD_ITEM: "ADD_ITEM", REMOVE_ITEM: "REMOVE_ITEM", INCREASE_ITEM: "INCREASE_ITEM", DECREASE_ITEM: "DECREASE_ITEM",item: ban bố object của sản phẩm (Chi phí, con số, ...)Chúng ta rất có thể tùy trở nên các tđam mê số truyền mang đến Dispatcher, ví dụ bạn có thể viết tên cho những tđắm say số thứ hạng như my_nhà cửa, cart_thành công,... không tồn tại vấn đề gì.

Đúng theo luồng buổi giao lưu của Flux, hãy xem sau thời điểm Action media tin mang đến Dispatcher thì Dispatcher đang xử lý ban bố như thế nào và thông báo mang đến Store ráng làm sao. Hãy thuộc xem tệp tin src/js/dispatcher/app-dispatcher.js:

var Dispatcher = require("flux").Dispatcher;var _ = require("underscore");var AppDispatcher = _.extend(new Dispatcher(), handleViewAction: function(action) this.dispatch( source: "VIEW_ACTION", action: action ) );module.exports = AppDispatcher;Tại trên đây chúng ta thừa kế Dispatcher từ module flux nhưng Facebook cung ứng. Ta có thể thấy function handleViewAction nhưng mà AppActions của chúng ta vừa Gọi mang đến đợt trước. Lúc này AppDispatcher vẫn coi như trạm trung chuyển báo cáo, phát lệnh gửi biết tin cho tới những Store.

Source code js/stores/app-stores.js

var AppDispatcher = require("../dispatcher/app-dispatcher");var AppConstants = require("../constants/app-constants");var _ = require("underscore");var EventEmitter = require("events").EventEmitter;var CHANGE_EVENT = "change";var _catalog = < id: 1, title: "Widget #1", cost: 1, id: 2, title: "Widget #2", cost: 2, id: 3, title: "Widget #3", cost: 3>;var _cartItems = <>;function _removeItem(index) _cartItems.inCart = false; _cartItems.splice(index, 1);function _increaseItem(index) _cartItems.qty++;function _decreaseItem(index) if (_cartItems.qty > 1) _cartItems.qty--; else _removeItem(index); function _addItem(item) if (!thành công.inCart) item<"qty"> = 1; item<"inCart"> = true; _cartItems.push(item); else _cartItems.forEach(function(cartItem, i) if (cartItem.id == chiến thắng.id) _increaseItem(i); ); var AppStore = _.extend(EventEmitter.prototype, emitChange: function() this.emit(CHANGE_EVENT); , addChangeListener: function(callback) this.on(CHANGE_EVENT, callback); , removeChangeListener: function(callback) this.removeListener(CHANGE_EVENT, callback); , getCart: function() return _cartItems; , getCatalog: function() return _catalog; );AppDispatcher.register(function(payload) var action = payload.action; // This is action from handleViewAction switch (action.actionType) case AppConstants.ADD_ITEM: _addItem(action.item); break; case AppConstants.REMOVE_ITEM: _removeItem(action.index); break; case AppConstants.INCREASE_ITEM: _increaseItem(action.index); break; case AppConstants.DECREASE_ITEM: _decreaseItem(action.index); break; AppStore.emitChange(); return true;);module.exports = AppStore;AppStores sẽ ĐK trước cùng với Dispatcher nhằm lắng tai những Action:

AppDispatcher.register(function(payload) var action = payload.action; // This is action from handleViewAction switch (action.actionType) case AppConstants.ADD_ITEM: _addItem(action.item); break; case AppConstants.REMOVE_ITEM: _removeItem(action.index); break; case AppConstants.INCREASE_ITEM: _increaseItem(action.index); break; case AppConstants.DECREASE_ITEM: _decreaseItem(action.index); break; AppStore.emitChange(); return true;);Sau Khi triển khai update những tài liệu tương quan (vào luồng hoạt động này là thêm bắt đầu một loại sản phẩm vào giỏ hàng), AppStore thực hiện Viral sự khiếu nại để thông tin cho tới cho các View tài liệu lưu trữ đã có đổi khác nhờ việc hỗ trợ của module EventEmitter

AppStore.emitChange();var AppStore = _.extend(EventEmitter.prototype, emitChange: function() this.emit(CHANGE_EVENT); , addChangeListener: function(callback) this.on(CHANGE_EVENT, callback); , removeChangeListener: function(callback) this.removeListener(CHANGE_EVENT, callback); , getCart: function() return _cartItems; , getCatalog: function() return _catalog; );AppStore cung cấp hàm getCart() để lấy đọc tin của biến hóa _cartItems. Ta hoàn toàn có thể tưởng tượng việc AppStore tiến hành biến hóa biết tin của đổi thay _cartItems tương đương với bài toán đổi khác state của Component.Cuối cùng ban bố đã làm được truyền cho View cùng render lại để nhận ra tài liệu mới nhất. Hãy cùng xem source code của src/js/components/cart.js:

var React = require("react");var AppStore = require("../stores/app-store");var RemoveFromCart = require("../components/remove-from-cart");var Increase = require("../components/increase");var Decrease = require("../components/decrease");function getCartItems() return items: AppStore.getCart() var Cart = React.createClass( getInitialState: function() return getCartItems(); , componentWillMount: function() AppStore.addChangeListener(this._onChange); , _onChange: function() this.setState(getCartItems()); , render: function() var total = 0; var items = this.state.items.map(function(vật phẩm, i) var subtotal = thành tựu.qty * cống phẩm.cost; total += subtotal; return ( tr key=i> td>RemoveFromCart index=i/>/td> td>thành công.title/td> td>thành công.qty/td> td> Increase index=i /> Decrease index=i /> /td> td>$subtotal/td> /tr> ); ); return ( table className="table table-hover"> thead> tr> th>/th> th>Item/th> th>Quantity/th> th>/th> th>Subtotal/th> /tr> /thead> tbody> items /tbody> tfoot> tr> td colSpan="4" className="text-right">Total/td> td>$total/td> /tr> /tfoot> /table> ); );module.exports = Cart;View lúc khởi chế tác luôn luôn lắng nghe sự biến hóa từ phía Store

componentWillMount: function() AppStore.addChangeListener(this._onChange);lúc Store biến đổi thông báo, View gồm trách nhiệm Gọi cùng rước dữ liệu mới từ bỏ Store

_onChange: function() this.setState(getCartItems());Sau Khi mang được tài liệu mới nhất cùng với Việc đổi khác state của mình, View vẫn tự động render lại cùng với dữ liệu tương xứng.

Xem thêm: Chi Phí Sản Xuất Kinh Doanh Theo Yếu Tố Là Gì, Phân Loại Chi Phí Sản Xuất Kinh Doanh

Trên đây tôi đang bộc lộ sang 1 flow đơn giản dễ dàng của ứng dụng cùng với mô hình Flux. Với những tác dụng không giống vui vẻ xem source code để phát âm chi tiết hơn. Hy vọng Tutorial nho nhỏ này sẽ giúp ích mang lại các bạn trong những bước đầu tiên tìm hiểu về quy mô Flux.