FLUX LÀ GÌ

Trong nội dung nội dung bài viết này, tôi thuộc các bạn sẽ cùng mọi người trong nhà đàm đạo về Flux, rõ ràng về các yếu tố với buổi giao lưu của Flux, bên cạnh đó tôi cũng giới thiệu một bài chỉ dẫn nhỏ tuổi (tutorial) để xây cất một module shopping cart dễ dàng và đơn giản bởi Flux. Hãy cùng tiếp cận bằng phần đa câu hỏi nhưng bạn đang đưa ra trong đầu cùng với Flux khi bạn chưa chắc chắn gì về nó

*

Có buộc phải dùng Flux ko ?

Nếu áp dụng của người tiêu dùng đề xuất làm việc với tài liệu động thì câu vấn đáp là , chúng ta nên cần sử dụng Flux.

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

Nếu ứng dụng của khách hàng chỉ làm việc với dữ liệu tĩnh, không share các tâm trạng của ứng dụng, không lưu trữ hoặc update dữ liệu, thì câu trả lời là không bởi vì Flux không hỗ trợ ích gì cho mình vào hoàn cảnh này cả +_+

Flux là gì ?

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

Một phong cách xây dựng Flux điển hình là sự việc phối hợp giữa tlỗi viện Dispatcher (được viết do Facebook) cùng với Module NodeJS EventEmitter để tạo cho một khối hệ thống sự kiện (Event System) thống trị các trạng thái của vận dụng.

Cấu trúc của Flux

Nlỗi các mô hình khác (VD: MVC, MVVM, ...), Flux cũng rất được chia nhỏ ra các kăn năn nguyên tố cơ bạn dạng nhỏng sau :

Actions - Làm trách nhiệm truyền dẫn tài liệu tới Dispatcher (được xem nhỏng các Helper Method)Dispatcher - Nhận báo cáo trường đoản cú Actions, truyền sở hữu tài liệu (payload) cho tới những nơi đang đăng ký dìm ban bố.Stores - Là chỗ lưu trữ tâm trạng cùng những xúc tích của khối hệ thống, đây đó là vị trí đã ĐK nhận dữ liệu với Dispatcher.Controller Views - Chính là những React Components, làm cho trọng trách dấn các tâm lý (state) trường đoản cú Stores cùng truyền dữ liệu (bên dưới dạng props) cho những yếu tắc con.

Mô hình hoạt động

Sơ thứ tầm thường về quan hệ nam nữ giữa các thành phần trong Flux :

Ta rất có thể phát âm đơn giản nlỗi sau :

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

Sơ vật dụng bên trên bảo đảm an toàn luồng tài liệu di chuyển trong Flux nên theo một đường cố định.

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 quá sâu về định hướng cùng đối chiếu cụ thể về Flux. Tôi muốn tập trung vào câu hỏi phát hành một vận dụng nhỏ dại để có một cái nhìn trực quan lại rộng về cách hoạt động của mô hình Flux.

Để rất có thể hiểu với tiến hành được bài bác giải đáp (tutorial) nho bé dại này, tôi đặt trả thiết chúng ta đã từng có lần thao tác làm việc cơ bạn dạng cùng với ReactJS :

Đã xây cất được Hello Word Application bằng JSX.Đã viết được Component làm sao đó trong React, ráng được tư tưởng state và props vào Component.Một để ý nho bé dại để rõ ràng thân state với props kia là khi state thay đổi thì Component sẽ tiến hành Render lại, còn props thì không.

quý khách hàng hoàn toàn có thể xem không hề thiếu Source của Tutorial này trên trên đây.

Xem thêm: Đĩa Hiren Boot Là Gì ? Các Tính Năng Chính Trên Hiren'S Boot Cần Biết

Bài toán đặt ra là thi công một module Cart (giỏ hàng) cho phép người dùng triển khai các thao tác :

Xem đọc tin những món đồ đang sẵn có và solo giá chỉ của từng mặt hàng.Xem công bố giỏ hàng hiện giờ, số lượng những thành phầm, giá bán từng mặt hàng cùng tổng mức đơn hàng.Các nút tác dụng tiến hành công việc:Thêm thành phầm vào giỏ hàng (Add).Xóa thành phầm trong giỏ hàng (Remove).Tăng con số (quantity) thành phầm hy vọng tải (Increase).Giảm con số (quantity) sản phẩm mong muốn download (Decrease).

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

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

dist/ js/ phầm mềm.js index.htmlnode_modules/src/ js/ actions/ components/ constants/ dispatcher/ stores/ ứng dụng.js index.htmlgulptệp tin.jspackage.jsonFile package.json có nội dung nhỏng sau:

"name": "react-flux-stores", "version": "1.0.0", "description": "Building simple store with React & Flux", "main": "phầm mềm.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 để thống trị những module liên quan nlỗi gulp, react, flux, underscore. Sau lúc đang tất cả package.json các bạn chỉ Việc vào thỏng mục làm việc với triển khai lệnh:

npm installnhằm thiết đặt những module áp dụng mang đến áp dụng vào thư mục node_modules.

gulpfle.js

var gulp = require("gulp");var browserify = require("gulp-browserify");var concát = 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 trách nhiệm chính:

browserify: tất cả sự giúp đỡ của reactify để chuyển code tự jsx sang js, mặt khác copy app.js sang trọng dist/js.copy: chỉ làm trách nhiệm copy index.html từ src lịch sự dist.

Để triển khai gulp task, điều đầu tiên bạn phải làm cho là thiết lập global gulp:

npm install --global gulpSau kia vào thư mục thao tác làm việc và chạy lệnh gulp, khi đó những gulp task sẽ tiến hành tự động tiến hành theo task mặc định.

Như vậy bọn họ đã hoàn thành việc thiết đặt các cơ chế trợ giúp cho bài toán phát triển vận dụng. Chúng ta sẽ bao gồm trong tay thỏng viện react, thư viện flux. Giờ là thời gian bắt đầu vào tạo ra View và các công dụng tương quan.

Với hình hình ảnh vận dụng kết thúc, ta rất có thể phân tách màn hình thành các Component nlỗi hình hình ảnh sau:

Từ đó xây dựng được tlỗi mục src/js/components có những thành phần 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 bài viết này tôi xin phxay chỉ reviews một luồng hoạt động của tính năng Add To Cart theo mô hình Flux. Với những tác dụng Remove From Cart, Increase, Decrease các bạn vui miệng coi source code nhằm đọc chi tiết hơn.

Khi triển khai Add To Cart, bọn họ đang đề nghị thêm thành phầm vào giỏ hàng với hiển thị thông tin cho người sử dụng. Hãy với mọi người trong nhà xem 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;Khi cliông xã button Add khổng lồ cart, kích hoạt addItem sẽ được điện thoại tư vấn, đôi khi truyền theo báo cáo của sản phẩm đang được lựa chọn (dưới dạng Object). AppActions là khu vực đăng ký các Action của vận dụng và chuyển cài đặt biết tin (payload) tới Dispatcher.

Hãy thuộc xem src/js/actions/app-actions.js tiến hành số đông các bướ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: sản 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 họ đang Điện thoại tư vấn mang đến function addItem của AppActions kèm theo lên tiếng object của sản phẩm nhưng bọn họ chọn. khi này AppActions vẫn chuyển các đọc tin cho Dispatcher:

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

module.exports = ADD_ITEM: "ADD_ITEM", REMOVE_ITEM: "REMOVE_ITEM", INCREASE_ITEM: "INCREASE_ITEM", DECREASE_ITEM: "DECREASE_ITEM",item: thông tin object của thành phầm (Ngân sách chi tiêu, số lượng, ...)Chúng ta rất có thể tùy biến đổi các tsi mê số truyền cho Dispatcher, ví dụ bạn cũng có thể khắc tên cho các tham mê số kiểu nhỏng my_vật phẩm, cart_cửa nhà,... không có vụ việc gì.

Đúng theo luồng buổi giao lưu của Flux, hãy coi sau khoản thời gian kích hoạt media tin cho Dispatcher thì Dispatcher sẽ cách xử trí ban bố như thế nào cùng thông báo cho Store nỗ lực nào. Hãy thuộc xem file 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;Ở phía trên họ kế thừa Dispatcher tự module flux nhưng mà Facebook cung ứng. Ta rất có thể thấy function handleViewAction cơ mà AppActions của chúng ta vừa điện thoại tư vấn mang lại ngày trước. Lúc này AppDispatcher sẽ coi như trạm trung gửi báo cáo, phân 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 (!vật phẩm.inCart) item<"qty"> = 1; item<"inCart"> = true; _cartItems.push(item); else _cartItems.forEach(function(cartItem, i) if (cartItem.id == thành quả.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 đã ĐK trước cùng với Dispatcher để lắng tai các Action:

AppDispatcher.register(function(payload) var action = payload.action; // This is action from handleViewkích hoạt 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 cập nhật các tài liệu liên quan (trong luồng vận động này là thêm bắt đầu 1 mặt hàng vào giỏ hàng), AppStore triển khai Viral sự khiếu nại nhằm thông báo tới cho các View tài liệu lưu trữ đã có biến đổi nhờ sự trợ giúp 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() để mang công bố của biến chuyển _cartItems. Ta có thể tưởng tượng bài toán AppStore triển khai chuyển đổi lên tiếng của biến hóa _cartItems tương đương cùng với câu hỏi biến đổi state của Component.Cuối thuộc ban bố đã có truyền mang đến View cùng render lại nhằm nhận thấy dữ liệu tiên tiến 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(nhà cửa, i) var subtotal = sản phẩm.qty * sản phẩm.cost; total += subtotal; return ( tr key=i> td>RemoveFromCart index=i/>/td> td>thành quả.title/td> td>tòa tháp.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 Khi khởi chế tạo ra luôn lắng tai sự biến hóa tự phía Store

componentWillMount: function() AppStore.addChangeListener(this._onChange);Khi Store thay đổi báo cáo, View tất cả trọng trách Call với rước tài liệu new trường đoản cú Store

_onChange: function() this.setState(getCartItems());Sau khi lấy được tài liệu tiên tiến nhất cùng rất bài toán thay đổi state của chính mình, View sẽ tự động hóa render lại cùng với dữ liệu tương xứng.

Trên đây tôi vẫn diễn đạt sang một flow đơn giản và dễ dàng của áp dụng với quy mô Flux. Với các chức năng không giống vui miệng xem source code nhằm hiểu chi tiết rộng. Hy vọng Tutorial nho nhỏ dại này để giúp đỡ ích đến các bạn trong bước đầu khám phá về quy mô Flux.