Xây Dựng Ứng Dụng Đơn Giản Với Flux Là Gì ? (Từ Điển Anh Hướng Dẫn Và Giải Thích Flux Bằng Hình Vẽ

Trong nội dung bài viết này, tôi cùng các bạn sẽ cùng nhau thảo luận về Flux, cụ thể về các thành phần , và hoạt động của Flux, đồng thời tôi cũng đưa ra một bài hướng dẫn nhỏ (tutorial) để xây dựng một module shopping cart đơn giản bằng Flux. Hãy cùng tiếp cận chỉ bằng những câu hỏi mà bạn đang đặt ra trong đầu với Flux khi bạn chưa biết gì về nó

*

Có nên dùng Flux chưa ?

Nếu ứng dụng của bạn phải thực hiện việc với dữ liệu động thì câu trả lời là , bạn nên dùng Flux.

Bạn đang đọc: Xây Dựng Ứng Dụng Đơn Giản Với Flux Là Gì ? (Từ Điển Anh Hướng Dẫn Và Giải Thích Flux Bằng Hình Vẽ

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

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

Xây Dựng Ứng Dụng Đơn Giản Với Flux Là Gì ? (Từ Điển Anh Hướng Dẫn Và Giải Thích Flux Bằng Hình Vẽ

Flux chính là gì ?

Flux là một kiến trúc mà Facebook sử dụng trong khi làm việc với React. Flux không phải chính là một framework hay một thư viện (library). Nó đơn giản chỉ là một kiểu kiến trúc mới hỗ trợ thêm cho React, đồng thời xây dựng ý tưởng về luồng dữ liệu một chiều (Unidirectional Data Flow).

Một kiến trúc Flux điển hình chính là sự kết hợp giữa thư viện Dispatcher (được viết bởi Facebook) cùng với Module NodeJS EventEmitter để tạo nên một hệ thống sự kiện (Event System) quản lý các trạng thái của ứng dụng.

Cấu trúc của Flux

Như những quy mô khác ( VD : MVC, MVVM, … ), Flux cũng được chia ra những khối thành phần cơ bản như sau :Actions – Làm nhiệm vụ truyền dẫn dữ liệu tới Dispatcher (được coi như các Helper Method)Dispatcher – Nhận thông tin đến từ Actions, truyền tải dữ liệu (payload) tới các nơi đã đăng ký nhận thông tin.Stores – Là nơi lưu trữ trạng thái , các logic của hệ thống, đây chính là nơi sẽ đăng ký nhận dữ liệu với Dispatcher.Controller Views – Chính chính là các React Components, làm nhiệm vụ nhận các trạng thái (state) đến từ Stores và truyền dữ liệu (dưới dạng props) cho các thành phần con.

Mô hình hoạt động

– Làm trách nhiệm truyền dẫn tài liệu tới Dispatcher ( được coi như những Helper Method ) – Nhận thông tin từ Actions, truyền tải tài liệu ( ) tới những nơi đã đăng ký nhận thông tin. – Là nơi tàng trữ trạng thái , những logic của mạng lưới hệ thống, đây là nơi cũng sẽ đăng ký nhận tài liệu với Dispatcher. – Chính là những React Components, thực hiện trách nhiệm nhận những trạng thái ( ) từvà truyền tài liệu ( dưới dạng ) cho những thành phần con .Sơ đồ chung về quan hệ giữa những thành phần trong Flux :Ta hoàn toàn có thể hiểu đơn thuần như sau :Views là thành phần thực hiện nhiệm vụ hiển thị nội dung ứng dụng (có thể hiểu giống như thành phần V trong mô hình MVC).Khi người dùng tương tác với ứng dụng thực hiện thay đổi trạng thái (state) của ứng dụng (VD: thêm, sửa, xóa dữ liệu cá nhân), View sẽ thông qua Action gửi các thông tin thay đổi tới Dispatcher gồm 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 chi tiết nội dung muốn gửi (VD: Object chứa thông tin ID, quantity, price, … của sản phẩm).Sau khi nhận được thông tin từ Action, Dispatcher làm nhiệm vụ truyền tải (broadcast) nội dung nhận đã được tới các Store đăng ký lắng nghe sự kiện thay đổi từ trước đó.Store sau khi nhận thông tin, tiến hành cập nhật dữ liệu (có thể hiểu việc cập nhật dữ liệu ở đây giống việc cập nhật state của Component).Sau khi cập nhật, Store bắn sự kiện xuống View để tiến hành cập nhật hiển thị cho người dùng.Ngoài ra trong sơ đồ ở trên còn có một thành phần API để lấy dữ liệu từ Remote Server.chính chính là thành phần làm trách nhiệm hiển thị nội dung ứng dụng ( hoàn toàn có thể hiểu giống như thành phần V trong quy mô MVC ). Khi người dùng tương tác với ứng dụng thực hiện biến hóa trạng thái ( state ) của ứng dụng ( VD : thêm, sửa, xóa dữ liệu cá thể ), cũng sẽ thông quagửi những thông tin biến hóa tớigồm có : action_name : tên của ( VD : ADD_ITEM – thêm loại sản phẩm vào giỏ hàng ). action_payload : thông tin chi tiết cụ thể nội dung muốn gửi ( VD : Object chứa thông tin ID, quantity, price, … của mẫu sản phẩm ). Sau khi nhận được thông tin từlàm trách nhiệm truyền tải ( broadcast ) nội dung nhận đã được tới cácđăng ký lắng nghe sự kiện biến hóa đến từ trước đó. sau khi nhận thông tin, thực thi update tài liệu ( hoàn toàn có thể hiểu việc update tài liệu ở đây giống việc update state của Component ). Sau khi update, bắn sự kiện xuốngđể thực thi update hiển thị cho người dùng. Ngoài ra trong sơ đồ ở trên còn có một thành phầnđể lấy tài liệu từ Remote Server .Sơ đồ trên bảo vệ luồng tài liệu vận động , di chuyển trong Flux bắt buộc đi theo một đường số 1 định .

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

Trong bài viết này, tôi không đi quá sâu về triết lý , điều tra và phân tích cụ thể về Flux. Tôi muốn tập trung chuyên sâu vào việc thiết kế xây dựng một ứng dụng nhỏ để có một cái nhìn trực quan hơn về cách hoạt động giải trí của quy mô Flux .Để hoàn toàn có thể hiểu và triển khai đã được bài hướng dẫn ( tutorial ) nho nhỏ này, tôi đặt giả thiết những bạn đã từng thao tác cơ bản với ReactJS :Đã xây dựng được Hello Word Application chỉ bằng JSX.Đã viết đã được Component nào đó trong React, nắm đã được khái niệm state và props trong Component.Một chú ý nho nhỏ để phân biệt giữa state và props đó chính là khi state thay đổi thì Component cũng sẽ được Render lại, còn props thì không.Đã kiến thiết xây dựng được Hello Word Application chỉ bằng JSX.Đã viết được Component nào đó trong React, nắm đã được khái niệm state và props trong Component. Một quan tâm nho nhỏ để phân biệt giữa state và props đó chính là khi state biến hóa thì Component cũng sẽ được Render lại, còn props thì chưa .Bạn hoàn toàn có thể xem khá đầy đủ Source của Tutorial này tại đâ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 chính là xây dựng một module Cart (giỏ hàng) cho phép người dùng thực hiện các thao tác :

Xem thông tin các mặt hàng đang có , đơn giá của từng mặt hàng.Xem thông tin giỏ hàng hiện tại, số lượng các sản phẩm, giá từng mặt hàng và tổng giá trị đơn hàng.Các nút chức năng thực hiện công việc:Thêm sản phẩm vào giỏ hàng (Add).Xóa sản phẩm trong giỏ hàng (Remove).Tăng số lượng (quantity) sản phẩm muốn mua (Increase).Giảm số lượng (quantity) sản phẩm muốn mua (Decrease).Xem thông tin những các loại sản phẩm đang có , và đơn giá của từng mẫu sản phẩm. Xem thông tin giỏ hàng hiện tại, số lượng những các loại sản phẩm, giá từng các loại sản phẩm và tổng giá trị đơn hàng. Những nút công dụng thực thi việc thực hiện : Thêm mẫu sản phẩm vào giỏ hàng ( ). Xóa loại sản phẩm trong giỏ hàng ( ). Tăng nhanh số lượng ( quantity ) loại sản phẩm muốn mua ( ). Giảm số lượng ( quantity ) mẫu sản phẩm muốn mua ( ) .Hình ảnh của Module khi triển khai xong như sau :Trước tiên hãy mở màn với cấu trúc thư mục của ứng dụng mà tất cả mọi người sắp thiết kế xây dựng :dist / js / app.js index. htmlnode_modules / src / js / actions / components / constants / dispatcher / stores / app.js index.htmlgulpfile.jspackage. jsonFile package.json có nội dung như sau : ” name ” : ” react-flux-stores “, ” version ” : ” 1.0.0 “, ” description ” : ” Building simple store with React and Flux “, ” main ” : ” app.js “, ” scripts ” : ” test ” : ” gulp ” , ” repository ” : ” type ” : ” git “, ” url ” : ” https://github.com/nguyenthanhtung88/react-flux-stores.git ” , ” keywords ” : , ” 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 ” Dùng npm để quản trị những module tương quan như gulp, react, flux, underscore. Sau khi đã có package.json bạn chỉ việc vào thư mục thao tác , thực thi lệnh :

npm installđể cài đặt các module sử dụng cho ứng dụng vào thư mục node_modules.

Zalo OA – official account là gì? Phương Pháp tạo một Zalo OA

gulpfle.jsvar gulp = require ( ” gulp ” ) ; var browserify = require ( ” gulp-browserify ” ) ; var concat = require ( ” gulp-concat ” ) ; gulp.task ( ” browserify “, function ( ) gulp.src ( ” src / js / app.js ” ). pipe ( browserify ( transform : ” reactify ” ) ). pipe ( concat ( ” app.js ” ) ). pipe ( gulp.dest ( ” dist / js ” ) ) ; ) ; gulp.task ( ” copy “, function ( ) gulp.src ( ” src / index.html ” ). pipe ( gulp.dest ( ” dist ” ) ) ; ) ; gulp.task ( ” default “, ) ; gulp.task ( ” watch “, function ( ) gulp.watch ( ” src / * * / *. * “, ) ; ) ; Gulp thực hiện 2 trách nhiệm chính :browserify: có sự trợ giúp cho của reactify để chuyển code từ jsx sang js, đồng thời copy app.js sang dist/js.copy: chỉ làm nhiệm vụ copy index.html đến từ src sang dist.browserify : có sự trợ giúp của reactify để chuyển code đến từ jsx sang js, đồng thời copy app.js sang dist / js.copy : chỉ thực hiện trách nhiệm copy index.html từ src sang dist .Để triển khai gulp task, điều tiên phong bạn cần làm là thiết lập global gulp :npm install — global gulpSau đó vào thư mục thao tác , và chạy lệnh gulp, khi đó những gulp task sẽ đã được tự động hóa thực thi theo task default .Như vậy tất cả mọi người đã triển khai xong việc setup những dụng cụ trợ giúp cho cho việc tăng trưởng ứng dụng. Chúng ta đã có trong tay thư viện react, thư viện flux. Giờ là lúc mở màn vào thiết kế xây dựng View , và những công dụng tương quan .Với hình ảnh ứng dụng triển khai xong, ta hoàn toàn có thể chia màn hình thành những Component như hình ảnh sau :Từ đó kiến thiết xây dựng đã được thư mục src / js / components gồm 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 khoanh vùng phạm vi bài viết này tôi xin phép chỉ trình làng một luồng hoạt động giải trí của công dụng Add To Cart theo quy mô Flux. Với những công dụng Remove From Cart, Increase, Decrease những bạn sung sướng xem source code để hiểu chi tiết cụ thể hơn .Khi thực thi Add To Cart, tất cả mọi người sẽ phải thêm mẫu sản phẩm vào giỏ hàng , và hiển thị thông tin cho người dùng. Hãy cùng nhau xem source code của component add-to-cartvar 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 click button Add to cart, kích hoạt addItem cũng sẽ được gọi, đồng thời truyền theo thông tin của mẫu sản phẩm đang được chọn ( dưới dạng Object ). AppActions là nơi ĐK những kích hoạt của ứng dụng , chuyển tải thông tin ( payload ) tới Dispatcher .Hãy cùng xem src / js / actions / app-actions.js triển khai những việc thực hiện 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 : item ) , 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ư ở trên tất cả chúng ta đã gọi đến function addItem của AppActions kèm theo thông tin object của loại sản phẩm mà tất cả chúng ta chọn. Khi này AppActions sẽ chuyển những thông tin cho Dispatcher :actionType: tên của Action, để thuận tiện cho việc đặt tên Action chúng ta quản lý thông qua AppConstants(chủ yếu để quản lý các text tĩnh đặt tên cho Action):actionType : tên của kích hoạt, để thuận tiện cho việc đặt tên kích hoạt tất cả chúng ta quản trị trải qua AppConstants ( đa phần để quản trị những text tĩnh đặt tên cho kích hoạt ) :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 loại sản phẩm ( Ngân sách chi tiêu, số lượng, … ) Chúng ta hoàn toàn có thể tùy biến những tham số truyền cho Dispatcher, ví dụ bạn hoàn toàn có thể đặt tên cho những tham số kiểu như my_item, cart_item, … chưa có yếu tố gì .Đúng theo luồng hoạt động giải trí của Flux, hãy xem sau khi kích hoạt truyền thông tin cho Dispatcher thì Dispatcher sẽ giải quyết , xử lý thông tin thế nào , thông tin cho Store thế nào. Hãy cùng 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 ; Ở đây tất cả chúng ta thừa kế Dispatcher từ module flux mà Facebook cung ứng. Ta hoàn toàn có thể thấy function handleViewAction mà AppActions của tất cả mọi người vừa gọi đến lúc trước. Khi này AppDispatcher cũng sẽ coi như trạm trung chuyển thông tin, phát lệnh gửi thông tin tới những Store .Source code js / stores / app-stores.jsvar 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 = ; 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 ( ! item. inCart ) item = 1 ; item = true ; _cartItems. push ( item ) ; else _cartItems. forEach ( function ( cartItem, i ) if ( cartItem. id = = item.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 với Dispatcher để lắng nghe những kích hoạt :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 ( trong luồng hoạt động giải trí này chính là thêm mới 1 mẫu sản phẩm vào giỏ hàng ), AppStore thực thi Viral sự kiện để thông tin tới cho những View dữ liệu tàng trữ được đổi khác nhờ sự trợ giúp của module EventEmitterAppStore. 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 thông tin của biến _cartItems. Ta hoàn toàn có thể tưởng tượng việc AppStore triển khai đổi khác thông tin của biến _cartItems tương tự với việc đổi khác state của Component. Cuối cùng thông tin đã được truyền đến View , và render lại để nhận được 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(item, i) var subtotal = item.qty * item.cost; total += subtotal; return ( tr key=i> td>RemoveFromCart index=i/>/td> td>item.title/td> td>item.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 tạo luôn lắng nghe sự thay đổi từ phía Store

componentWillMount : function ( ) AppStore. addChangeListener ( this. _onChange ) ; Khi Store biến hóa thông tin, View có trách nhiệm gọi , và lấy tài liệu mới từ Store_onChange : function ( ) this. setState ( getCartItems ( ) ) ; Sau khi lấy được tài liệu mới số 1 cùng với việc đổi khác state của mình, View sẽ tự động hóa render lại với tài liệu tương ứng .Trên đây tôi đã diễn đạt qua một flow đơn thuần của ứng dụng với quy mô Flux. Với những công dụng khác vui mừng xem source code để hiểu cụ thể hơn. Hy vọng Tutorial nho nhỏ này sẽ giúp cho ích cho những bạn trong trong bước đầu tìm hiểu , khám phá về quy mô Flux .

Giới thiệu: Quang Sơn

Quang Sơn là giám đốc hocdauthau.com - Kênh thông tin học đấu thầu, kiến thức tổng hợp, công nghệ, đời sống.

0 Shares
Share
Tweet
Pin