17
Li Đức Phương Email: [email protected] Backend: PHP & MYSQL Frontend: JS, HTML, CSS Kiến trúc Flux

Kiến trúc Flux

  • Upload
    cicaldp

  • View
    332

  • Download
    2

Embed Size (px)

Citation preview

Page 1: Kiến trúc Flux

Lại Đức Phương Email: [email protected]

Backend: PHP & MYSQL Frontend: JS, HTML, CSS

Kiến trúc Flux

Page 2: Kiến trúc Flux

MVC

Page 3: Kiến trúc Flux

Quan hệ quá nhiềuKhông thể kiểm soát

Page 4: Kiến trúc Flux

FluxKiểm soát các mối quan hệ

Page 5: Kiến trúc Flux

Action: Đăng ký các hàm View gọi khi cần

Dispatcher: Nút thắt cổ chai, vai trò trung chuyển từ Action đến Store

Store: Lưu trữ và xử lý dữ liệu

View: Lấy dữ liệu từ Store để hiện thị, lắng nghe sự thay đổi của Store

Page 6: Kiến trúc Flux
Page 7: Kiến trúc Flux
Page 8: Kiến trúc Flux

RefluxKhông có thành phần Dispatcher

Page 9: Kiến trúc Flux

Flux (Facebook)

• Actions

• Stores

• Components

• Dispatcher

• Constants

https://facebook.github.io/flux/

Page 10: Kiến trúc Flux

Examples

https://facebook.github.io/flux/docs/todo-list.html#content

https://github.com/facebook/flux/tree/master/examples/flux-todomvc/

https://github.com/facebook/flux/tree/master/examples

Page 11: Kiến trúc Flux

Show code

Page 12: Kiến trúc Flux

Redux

• Actions

• Constants

• Store

• Reducers

• Components

http://redux.js.org/

Page 13: Kiến trúc Flux

Examples

• http://redux.js.org/docs/introduction/Examples.html

• https://github.com/rackt/redux/tree/master/examples

Page 14: Kiến trúc Flux

Show code

Page 15: Kiến trúc Flux

React- Reduxhttp://redux.js.org/docs/basics/UsageWithReact.html

Bind Action vào trong component

Page 16: Kiến trúc Flux

Redux Devtool

Page 17: Kiến trúc Flux

Q & A