Để có thể quản lý được trạng thái của ứng dụng khi làm việc với React hay các dự án ứng dụng Single Page, Redux là một sự lựa chọn phù hợp. Vậy Redux là gì? Nguyên lý vận hành và cấu trúc hoạt động của nó như thế nào? Hãy cùng Vietnix giải đáp qua bài viết dưới đây.
Redux là gì?
Redux là một thư viện Javascript có tác dụng tạo ra một lớp quản lý mọi trạng thái của ứng dụng. Hay nói cách khác, Redux là một predictable state management tool (công cụ quản lý cao cấp) cho các ứng dụng được viết bằng ngôn ngữ lập trình Javascript và còn được gọi là Redux js.
Lưu ý: Redux js là một thư viện Javascript và Redux js khác với Redux Framework (là một WordPress Framework).
Redux giúp các ứng dụng bạn viết có thể hoạt động một cách nhất quán và có thể hoạt động trong nhiều môi trường khác nhau như client, server, native,… Ngoài ra, sử dụng thư viện Redux để lưu trữ cũng giúp quá trình test/kiểm thử phần mềm dễ dàng hơn.
Có thể nói, Redux là bộ đôi kết hợp hoàn hảo với React và bạn hoàn toàn có thể sử dụng thư viện này với các framework khác như Backbone, Angular, Angular2, Deku, Falcor. Kích thước Redux khá nhẹ, khoảng 2KB nên bạn sẽ không cần lo lắng vấn đề tăng kích thước ứng dụng.
Lịch sử ra đời của Redux
Càng ngày, các ứng dụng single-page sử dụng Javascript có yêu cầu ngày càng phức tạp, kéo theo đó là hệ thống mã code càng phải quản lý nhiều state hơn. Năm 2013, Facebook thông báo rằng Angular của Google đang ngày càng trở nên chậm chạp, nặng nề. Để giải quyết vấn đề này, React được ra đời.
Thế nhưng React không có khả năng quản lý trạng thái của ứng dụng mà đây chỉ là một thư viện để tạo ra các Component và render chúng lên thành giao diện. Tiếp đó, Facebook lại cho ra đời một thư viện mới có tên gọi là Flux với mục đích hỗ trợ React quản lý trạng thái của ứng dụng.
Flux rối rắm và không nhận được sự ủng hộ của đông đảo mọi người. Cũng trong thời gian này, Dan Abramov nghiên cứu về hệ thống thư viện Flux của Facebook và ngôn ngữ ELM. Anh nhận thấy rằng ELM và Flux có nhiều điểm tương đồng.
Tháng 5/2015, Dan Abramov công bố một thư viện Javascript mới có tên Redux, là sự kết hợp giữa hệ thống kiến trúc của ELM có thể loại bỏ sự rối rắm, phức tạp của Flux. Cho đến nay, Redux vẫn được sử dụng phổ biến hơn vì tính ứng dụng và sự đơn giản của nó.
Cách hoạt động của Redux
Cách hoạt động của Redux khá đơn giản, dựa trên 3 thành phần chính là: Actions, Store, Reducers.
Actions
Actions hay còn được hiểu đơn giản là các events, là bước đầu tiên trong luồng hoạt động của Redux và là cách để gửi dữ liệu từ ứng dụng đến Redux Store (cửa hàng redux). Bất cứ khi nào trạng thái của app hay là render của view thay đổi thì sẽ có một hành động sẽ được tạo ra. Các dữ liệu mô tả hành động này đến từ sự tương tác của người dùng với ứng dụng, API calls, các form submission,…
Reducers
Sau khi các dữ liệu được Actions sẽ chuyển về Reducers. Đây là nơi state được lưu giữ dưới dạng đối tượng và giúp xác định sự thay đổi trạng thái ứng dụng sao cho đáp ứng Action được gửi tới Store. Lúc này Reducer sẽ làm nhiệm vụ định hướng sự thay đổi của các state mỗi khi Actions có phản hồi và phản hồi được gửi đến reducer.
Hiểu một cách đơn giản, Reducers là các function nguyên thuỷ có khả năng lấy state hiện tại của ứng dụng. Sau đó chúng thực hiện một hành động (Action) và trả về một state hoàn toàn mới. Các state đó sẽ được lưu trữ như những object. Từ đó chúng định rõ cách state của một ứng dụng thay đổi và giúp dễ dàng xác nhận những sự thay đổi trong phản hồi của action gửi đến store.
Store
Store là nơi lưu trạng thái của ứng dụng và chỉ có duy nhất một Store trong bất kỳ một chương trình ứng dụng Redux nào. Nhiệm vụ của store chính là quản lý, access các state được lưu, update state thông qua dispatch, cho phép truy cập state thông qua Getstate và đăng ký hoặc hủy đăng ký các listeners thông qua helper methods.
Trong Redux, Store đóng vai trò là thành phần quan trọng nhất bởi nó sở hữu những chức năng và nhiệm vụ quan trọng. Bởi nếu không có các phần tử dispatcher gửi đến Reducer thì các Actions sẽ không được kích hoạt.
Nguyên lý vận hành của Redux
Quá trình xây dựng Redux được ứng dụng 3 nguyên lý vận hành cơ bản như sau:
1. Sử dụng một nguồn dữ liệu tin cậy duy nhất
Quá trình hoạt động của redux phụ thuộc vào nhiều nguồn dữ liệu khác nhau như từ máy chủ, thao tác người dùng,… Việc có nhiều nguồn dữ liệu như vậy khiến ứng dụng khó kiểm soát hết được.
Để giải quyết vấn đề, Redux đã đưa ra giải pháp bằng cách mọi nguồn dữ liệu đều được xử lý và tập hợp thành một nguồn dữ liệu duy nhất. Hệ thống state của toàn bộ ứng dụng được chứa trong một object tree và cây này nằm trong Store duy nhất.
2. Xây dựng trạng thái chỉ được phép đọc
Cách duy nhất để người dùng có thể thay đổi State của ứng dụng là phát một Action, tức một object mô tả tất cả những gì xảy ra. Trạng thái của Redux chỉ là một đối tượng và nó chỉ có thể thay đổi chỉ khi xuất hiện một sự kiện. Ngoài ra thì không được phép thay đổi “trực tiếp”.
3. Chỉ thay đổi bằng hàm thuần túy
Để chỉ ra cách mà State được biến đổi bởi Action, người dùng sử dụng các pure function được gọi là Reducer. Thông qua hàm thuần túy, bạn có thể thực hiện việc thay đổi trạng thái của ứng dụng. Cụ thể, dữ liệu của các sự kiện và trạng thái hiện tại đưa vào sẽ được hàm xử lý và trả về trạng thái tiếp theo.
Cấu trúc của Redux là gì?
Redux học hỏi cấu trúc kiến trúc của Flux đã ra đời trước đó nhưng lược bỏ đi sự phức tạp không cần thiết vì vậy cấu trúc cơ bản của React Redux chỉ có 4 thành phần như sau:
- Action: Hiểu đơn giản đây là nơi được tạo ra để lưu giữ và mang các thông tin/dữ liệu từ nhiều nguồn khác nhau, có thể đến từ người dùng, máy chủ, API call, form submission,… gửi tới Store. Hệ thống dữ liệu này là một sự kiện mô tả đầy đủ những gì đã xảy ra, như hành động của người dùng (nhấn chuột, copy, tải về,…), thời gian xảy ra hành động, hành động diễn ra ở đâu,…
- Reducer: Là một hàm thuần tuý để xác định State đã thay đổi như thế nào từ đó trả về một trạng thái mới từ trạng thái ban đầu. Có nghĩa là, nếu Actions không mô tả rõ ràng trạng thái nào của response đã thay đổi và thay đổi như thế nào thì Reducer sẽ đảm nhiệm việc này. Reducers xác định trạng thái hiện tại của ứng dụng thay đổi như thế nào để đáp ứng với dữ liệu của Action được gửi đến Store.
- Store: Là nơi đóng vai trò quan trọng nhất thực hiện nhiệm vụ kích hoạt các Action đã được thực hiện phải sử dụng đến các phần tử dispatcher sau đó gửi đến Reducer. Store cũng là chương trình duy nhất tại Redux hỗ trợ việc lưu trữ, quản lý State, cho phép truy cập State qua getState, update State qua dispatch (action), đăng kí listener qua subscribe (listener). Store còn cho phép người dùng có thể tiếp tục truy cập và can thiệp vào những chương trình đã được lưu thông qua những phương pháp hỗ trợ gồm cập nhật, đăng ký hoặc hủy.
- View: Là nơi sẽ hiển thị các dữ liệu được cung cấp bởi store.
Một vài khái niệm khác liên quan đến Redux
Redux Thunk là gì?
Redux Thunk là một phần mềm trung gian (middleware) cho phép trả về các function thay vì chỉ là action trong Redux. Một trong những ứng dụng chính của Redux Thunk là dùng để xử lý action không đồng bộ, chẳng hạn như sử dụng axios để gửi một GET request.
Redux Persist là gì?
Redux Persist là một thư viện cho phép lưu Redux store trong bộ nhớ cục bộ của ứng dụng. Với các thư viện quản lý trạng thái như Redux, người dùng có thể quản lý trạng thái của ứng dụng chỉ từ một nơi duy nhất. Khi ứng dụng phát triển dần về mặt tính năng, ta có thể cần duy trì một số thông tin cục bộ cho từng người dùng.
Lấy ví dụ, giả sử rằng ta cần xây dựng một ứng dụng giỏ hàng cho nền tảng mua sắm, và ứng dụng này yêu cầu việc duy trì dữ liệu liên quan đến sản phẩm mà người dùng đang thêm vào giỏ trước khi thực hiện đặt hàng. Nếu người dùng đóng ứng dụng trước khi đặt hàng, thì ta nên thiết kế ứng dụng sao cho các sản phẩm trước đó vẫn còn tồn tại trong giỏ hàng người dùng để đem lại trải nghiệm tốt nhất. Trong trường hợp này, ta có thể lưu các sản phẩm này trong bộ nhớ cục bộ của người dùng. Đây chính là ứng dụng phổ biến nhất của Redux Persist.
Bên cạnh đó, việc sử dụng Redux Persist cho phép thực hiện công việc hoàn toàn tự động chỉ với một số lượng bản ghi nhỏ cho quá trình khởi tạo. Từ đó quy trình quản lý ứng dụng với Redux sẽ còn trở nên đơn giản, hiệu quả hơn nữa.
Lời kết
Ở phạm vi bài viết này, Vietnix chỉ trình bày với bạn những khái niệm cơ bản để giải thích Redux là gì. Ngoài ra là các chia sẻ liên quan đến nguyên lý cơ bản và cách thức hoạt động của Redux. Trong những nội dung tiếp theo, Vietnix sẽ lý giải các vấn đề khác liên quan đến Redux. Nếu bạn có thêm thắc mắc nào, hãy để lại bình luận phía dưới để được các chuyên gia giải đáp.
