Hiện nay Reactjs là một thư viện mạnh mẽ khá phổ biến. Khi làm việc với React hay các dự án ứng dụng Single Page nói chung, có một vấn đề khá đau đầu là làm sao quản lý được trạng thái của ứng dụng đó. Và Redux sẽ giúp giải quyết vấn đề này.

Định nghĩa Redux là gì?

Redux được ra đời do đâu?

Trước khi tìm hiểu Redux là gì thì cùng tìm hiểu lý do Redux ra đời nhé. Các ứng dụng single-page yêu cầu sử dụng Javascript ngày càng phức tạp. Khi đó, code sẽ phải quản lý số lượng state nhiều hơn. Trong khi đó, với Redux thì state của ứng dụng đều được lưu giữ trong store. Và, mỗi component rất có thể access với bất kỳ state nào khi chúng muốn từ store này.

Định nghĩa về Redux

Thế nào là Redux?

Redux được định nghĩa là một predictable state management tool dành riêng cho các ứng dụng của Javascript. Redux se hỗ trợ viết ứng dụng hoạt động một cách nhất quán, chạy trong môi trường khác nhau và dễ hơn khi test. Redux được ra đời từ việc lấy cảm hứng bởi các tư tưởng ngôn ngữ Elm và kiến trúc Flux từ Facebook. Chình vì vậy, Redux luôn được sử dụng với mục đích kết hợp cùng với React.

Cách hoạt động của Redux là gì?

Hiểu một cách đơn giản, Redux sẽ hoạt động dựa vào 3 thành phần cơ bản là: Actions, Reducers và Store.

Với Actions

Bạn có thể hiểu Actions là các events và chúng là cách cần thiết mà bạn cần làm để send data từ app đến Redux store. Các data xuất hiện thông qua các tương tác của user hoặc qua app, API call hoặc từ form submission.

Về Reducers

Reducers là những function dạng nguyên thủy và chúng thường lấy state hiện tại của app. Từ đó, thực hiện một action rồi trả về dưới dạng một state mới. Các states này sẽ được lưu trữ như objects và chúng sẽ định rõ các state của ứng dụng thay đổi khi phản hồi một action gửi đến store.

Hàm thuần khiết (Pure function) là gì ?

Định nghĩa hàm thuần khiết:

Hàm luôn trả về cùng một kết quả nếu được truyền vào các tham số không đổi. Nó không hề phụ thuộc vào bất kỳ trạng thái hoặc dữ liệu nào, cũng như những sự thay đổi trong khi chương trình đang được chạy. Nó chỉ phụ thuộc vào các tham số đầu vào của nó.
Hàm này không tạo ra bất kỳ ảnh hưởng nào đến các đối tượng khác , chẳng hạn như các request, input, output hoặc data mutation. Đó là định nghĩa của một hàm thuần khiết. Nếu nó thỏa mãi 2 điều kiện trên thì nó chính là một hàm thuần khiết. Bạn có thể đã tạo ra rất nhiều hàm thuần khiết trong quá khứ mà không hề nhận ra.

Reducer cần phải là pure function, do đó không thể chèn các side effect như fetch, … vào reducer mà cần thông qua middleware , sẽ được trình bày ở bài sau

Store

Store là loại lưu trạng thái ứng dụng và là duy nhất trong bất kỳ ứng dụng Redux nào. Người dùng có thể access các state đã được lưu, update hoặc đăng ký cũng như hủy đăng ký các listeners thông qua helper methods.

Nguyên lý vận hành của React redux là gì?

Quá trình xây dựng Redux các chuyên gia đã dựa vào 3 nguyên lý cơ bản sau:

Sử dụng nguồn dữ liệu đáng tin cậy duy nhất. Các State của tất cả ứng dụng đều nằm trong một object tree nằm trong một Store duy nhất.
Chỉ được phép đọc trạng thái: Có nghĩa rằng, để thay đổi State của ứng dụng thì chỉ có cách duy nhất là phát một Action.
Sử dụng hàm thuần túy để thay đổi. Với mục đích chỉ ra cách State được biến đổi từ Action. Vì thế, chúng ta cần sử dụng các pure function gọi là Reducer.

Nguyên tắc vận hành của Redux

Lý do nên sử dụng Redux reactjs là gì?

Bởi vì Redux được xem như một thư viện và nó cho phép bạn có thể quản lý state có trong ứng dụng javascript. Vì vậy, nếu bạn kết hợp nó trong Reactjs sẽ mang lại sự hỗ trợ vô cùng tốt. Ngoài ra, một số lý do giúp cho redux được dùng ngày càng phổ biến là:

Hỗ trợ giải quyết những bài toán quan trọng như chia sẻ state. Việc chia sẻ state giữa các component với nhau sẽ dựa theo các thức truyền khác nhau. Vì vậy, nó rất rắc rối và phức tạp nên cần có sự hỗ trợ của Redux.

Ví dụ minh họa: Nếu bạn cần truyền dữ liệu từ component A sang C thì bắt buộc cần phải thông qua component B. Khi đó, bắt buộc ta cần phải chia sẻ dữ liệu giữa các component với nhau bằng cách sử dụng props và thông qua các component trung gian.Vì thế, để việc truyền dữ liệu được tối ưu hóa và đơn giản nhất bạn cần lưu dữ liệu vào một store.

Như vậy, việc cấp phát dữ liệu cho các component cần thiết sẽ dễ hơn. Chính lúc này, store có nhiệm vụ trung gian nhằm chứa và phân phát các dữ liệu. Như vậy, khi bạn cần truyền dữ liệu từ component A sang C thì chỉ việc đẩy state vào store. Khi đó, Store sẽ thực hiện cấp phát dữ liệu sang component C. Đây chính là cách mà Redux đã sử dụng để kiểm soát dữ liệu tối ưu và dễ dàng hơn.

Luồng chạy:

https://viblo.asia/p/redux-cho-nguoi-moi-bat-dau-part-1-introduction-ZjleaBBZkqJ

Dev Training Document

Redux - Introduction (3h)

Analytics