Giới thiệu về Redux

ELM

ELM là một ngôn ngữ lập trình hàm (Functional Programming Language), chịu ảnh hưởng khá nhiều từ Haskell, và được biên dịch trực tiếp ra JavaScript. Ngoài việc giống Haskell ra thì điểm nổi bật nhất của ELM chính là kiến trúc của nó (ELM Architecture), kiến trúc này giúp phát triển các ứng dụng Web trên các ngôn ngữ kiểu FPL (Functional Programming Language) dễ dàng hơn.

• USER INTERFACE — action —> DISPATCHER — action —> STORES — notify changes —> USER INTERFACE

Dưới đây là hình ảnh minh họa kiến trúc tổng quát của FLUX:

Khi người dùng thực hiện một hành động trên giao diện (Chẳng hạn nhấn chuột). Một đối tượng Action sẽ được tạo ra, đây là một đối tượng thông thường nó lưu trữ các thông tin như: Kiểu hành động, diễn ra tại đâu, lúc nào, tọa độ (ứng với sự kiện chuột), thay đổi state nào,..

// Action object example:
{
  type: 'ADD_TODO',
  payload: {
    title: 'Do something.',
    priority: 'HIGH',
    completed: false
  }
}

Các phần trong kiến trúc của FLUX:

VIEW: Là một sự hợp thành phân cấp (hierarchical composition) của các React Component.

ACTION: Là một đối tượng thuần thúy được tạo ra để lưu trữ thông tin liên quan tới sự kiện của người dùng (Nhấn chuột trên giao diện,..), nó bao gồm các thông tin như: Kiểu hành động, xẩy ra lúc nào, ở đâu, tọa độ, mục đính để thay đổi state nào,.

DISPATCHER: Điểm duy nhất trong ứng dụng để tiếp nhận các đối tượng Action cần xử lý.

STORE: Store lắng nghe các Action, quản lý dữ liệu và trạng thái của ứng dụng. Các Store dựa vào các đối tượng action để phản hồi đến các USER INTERFACE tương ứng.