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:

...

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: 

...

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à: 

...

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

...