23 lượt xem

Redux là gì? Cấu trúc của Redux như thế nào? | Acb-win.com

Chắc hẳn bạn đã biết sự phổ biến của JavaScript, ứng dụng của ngôn ngữ lập trình này được sử dụng trong hầu hết các chương trình hiện nay. Redux là một trong những thư viện JavaScript phổ biến nhất. Tuy nhiên, không phải ai trong chúng ta cũng biết cách sử dụng thư viện này. Vậy Redux là gì? Để hiểu thêm về Redux, hãy cùng Tino Group tìm hiểu qua bài viết dưới đây nhé!

Tổng quan về Redux

Redux là gì?

Redux là một vùng chứa trạng thái có thể dự đoán được còn được gọi là thư viện JavaScript. Thư viện này được thiết kế để giúp bạn viết các ứng dụng JavaScript có thể chạy nhất quán trong môi trường máy khách, máy chủ và kỹ thuật số và cho phép kiểm tra dễ dàng.

Mặc dù Redux chủ yếu được sử dụng như một công cụ quản lý trạng thái với React, nhưng bạn có thể sử dụng nó với bất kỳ khung hoặc thư viện JavaScript nào khác. Redux khá nhẹ, chỉ 2 KB (bao gồm cả phụ thuộc). Vì vậy, bạn không phải lo lắng rằng công cụ này sẽ tăng kích thước nội dung ứng dụng của bạn.

Với Redux, trạng thái ứng dụng của bạn sẽ được lưu trữ trong Cửa hàng và mỗi thành phần có thể truy cập bất kỳ trạng thái cần thiết nào từ Cửa hàng này.

redux-la-gi

Tại sao sử dụng Redux?

Khi sử dụng kết hợp Redux với Reactjs, các trạng thái không nhất thiết phải được cập nhật, điều này giúp người dùng dễ dàng theo dõi các thay đổi trong hành động hơn. Các phần tử cũng sẽ không sử dụng bất kỳ trạng thái hoặc phương thức nào để cho phép các phần tử con chia sẻ dữ liệu với nhau. Khi mỗi quy trình có sự can thiệp của Redux, ứng dụng sẽ được đơn giản hóa và dễ bảo trì hơn.

Ưu điểm của Redux

Hỗ trợ dự đoán trạng thái

Redux có các tính năng dự đoán và quản lý trạng thái và chúng sẽ không bao giờ thay đổi. Lợi ích này có thể giúp người dùng thực hiện các tác vụ phức tạp như hoàn tác hoặc làm lại vô thời hạn. Đồng thời, Redux còn có khả năng tự động xoay vòng giữa các trạng thái để kiểm tra thời gian thực hiệu quả.

READ  Tổng đài Shopee là bao nhiêu? Cách liên hệ đến trung tâm CSKH của Shopee nhanh nhất | Acb-win.com

Khả năng bảo trì

Redux có một hệ thống mã hóa cực kỳ nghiêm ngặt, nhưng với những ai đã sử dụng và hiểu về Redux thì sẽ dễ dàng tiếp cận hơn. Đây là điều làm cho Redux rất dễ bảo trì.

Ngoài ra, lợi ích này còn giúp người dùng tách logic nghiệp vụ ra khỏi sơ đồ thành phần. Trong khi đó, mục tiêu quan trọng của các ứng dụng quy mô lớn ngày nay là làm cho phần mềm của chúng có thể dự đoán và bảo trì được.

Gỡ lỗi một cách dễ dàng

Redux cho phép người dùng dễ dàng gỡ lỗi bằng cách lưu các hành động và trạng thái để dễ dàng xác định lỗi mã hóa, lỗi mạng và các lỗi định dạng khác trong quá trình triển khai chương trình. Việc gỡ lỗi thông thường sẽ mất nhiều thời gian và phức tạp, nhưng với Redux DevTools của Redux sẽ giúp người dùng đơn giản hóa việc gỡ lỗi.

redux-la-gi

Lợi ích về hiệu suất

React Redux thực hiện rất nhiều tối ưu hóa hiệu suất nội bộ, vì vậy thành phần được kết nối của bạn chỉ hiển thị khi nó thực sự cần thiết.

Redux là gì?  Cấu trúc của Redux là gì?  2

QUẢNG CÁO

Dễ dàng kiểm soát

Tương đối dễ dàng để kiểm tra các ứng dụng Redux vì các hàm được sử dụng để thay đổi trạng thái của các hàm thuần túy.

Trạng thái kéo dài

Bạn có thể giữ một số trạng thái ứng dụng trong bộ nhớ cục bộ và khôi phục chúng sau khi nâng cấp. Điều này thực sự thuận tiện.

Kết xuất phía máy chủ

Trên các máy chủ mà Redux có thể được xem, người dùng có thể xử lý quá trình hiển thị ban đầu của chương trình bằng cách phát các trạng thái tới máy chủ và chờ phản hồi từ nó.

Cấu trúc Redux

Cách thức hoạt động của Redux tương đối đơn giản. Có một kho lưu trữ trung tâm chứa toàn bộ trạng thái của ứng dụng. Mỗi thành phần có thể truy cập trạng thái được lưu trong bộ nhớ cache mà không cần phải gửi đạo cụ từ thành phần này sang thành phần khác.

Redux có cấu trúc gồm 3 phần: Cổ phiếu, Giảm giá và Cửa hàng.

redux-la-gi

Hành động

Hành động có thể hiểu là các sự kiện trong chương trình. Đây là cách duy nhất để người dùng truyền dữ liệu từ ứng dụng đến Store trong Redux, dữ liệu được chuyển có thể được yêu cầu bởi người dùng, ứng dụng, lệnh gọi API hoặc gửi biểu mẫu.

READ  Thẻ Timo là gì? Hướng dẫn cách sử dụng thẻ Timo | Acb-win.com

Các sự kiện sẽ được gửi đi bằng phương thức store.dispatch (). Loại sự kiện phải được thể hiện rõ ràng thông qua loại giá trị trước khi yêu cầu có thể được đáp ứng. Vùng chứa thông tin này được gọi là “trọng tải” và sự kiện được tạo ra thông qua Trình tạo hành động. Khi thực hiện các phép tính, các thao tác sẽ trả về một trạng thái hoàn toàn mới nên khả năng dự đoán của trạng thái này rất cao và dễ sử dụng.

Dưới đây là một ví dụ về một sự kiện có thể được kích hoạt khi đăng nhập vào ứng dụng:

{

type: "LOGIN",

payload: {

username: "foo",

password: "bar"

}

}

Đây là một ví dụ về Người tạo hành động

const setLoginStatus = (name, password) => {

return {

type: "LOGIN",

payload: {

username: "foo",

password: "bar"

}

}

}

Bộ giảm tốc

Nếu các hành động được cho là mô tả những gì xảy ra nhưng không chỉ rõ phần nào của trạng thái phản hồi đã thay đổi và như thế nào, thì bộ giảm tốc sẽ đảm nhiệm việc này. Các bộ giảm thiểu được coi là các chức năng thuần túy lấy trạng thái hiện tại của ứng dụng, sau đó thực hiện một hành động và trả về trạng thái mới. Các trạng thái này sẽ được lưu trữ dưới dạng đối tượng và cũng xác định cách trạng thái ứng dụng thay đổi để đáp ứng với một hành động được gửi đến Cửa hàng.

Bộ giảm thiểu dựa vào hàm “giảm” của JavaScript, trong đó một giá trị sẽ được tính toán từ nhiều giá trị sau khi thực thi hàm gọi lại.

Ví dụ:

const LoginComponent = (state = initialState, action) => {

switch (action.type) {

// This reducer handles any action with type "LOGIN"

case "LOGIN":

return state.map(user => {

if (user.username !== action.username) {

return user;

}

if (user.password == action.password) {

return {

...user,

login_status: "LOGGED IN"

}

}

});

default:

return state;

}

};

Cửa hàng

Store là chương trình duy nhất trên Redux hỗ trợ lưu trữ trạng thái ứng dụng, hay nói cách khác, chỉ có một Store trong bất kỳ ứng dụng Redux nào. Store cho phép người dùng tiếp tục truy cập các chương trình đã lưu và có thể can thiệp vào chúng thông qua các phương pháp hỗ trợ bao gồm cập nhật, đăng ký hoặc hủy.

Trong Redux, Store đóng vai trò quan trọng nhất vì các chức năng và hoạt động của nó, để kích hoạt các hành động cần thực hiện cần sử dụng các phần tử của bộ điều phối rồi gửi đến bộ giảm tốc.

Tạo shop để đăng nhập:

const store = createStore (LoginComponent);

Nguyên tắc hoạt động cơ bản của React Redux

Trong quá trình tạo ra Redux, các chuyên gia đã dựa vào 3 nguyên tắc cơ bản sau:

  • Sử dụng các nguồn dữ liệu đáng tin cậy. Các trạng thái của tất cả các ứng dụng nằm trong cùng một cây đối tượng trong một Cửa hàng duy nhất.
  • Chỉ trạng thái đã đọc được cho phép. Nói một cách đơn giản, để thay đổi trạng thái ứng dụng, cách duy nhất là thực hiện một Action.
  • Đồng thời sử dụng các hàm đột biến để chỉ ra trạng thái nên được chuyển đổi như thế nào bằng Hành động. Vì vậy, cần phải sử dụng các chức năng thuần túy được gọi là Reducers.
READ  EBIT là gì? Công thức tính và ý nghĩa của EBIT chuẩn xác nhất

redux-la-gi

Sự ra đời của Redux đối với người dùng như một sự cải tiến về tính dễ sử dụng cùng với nhiều tính năng hữu ích. Bài viết trên chúng tôi đã cung cấp cho bạn những thông tin về Redux. Để có thể hình dung và hiểu rõ ràng về quy trình làm việc của Redux, bạn nên tham khảo thêm tài liệu chuyên sâu!

Câu hỏi thường gặp về Redux

ReactJS là gì?

ReactJS là một thư viện JavaScript mã nguồn mở. Cha đẻ của ReactJS là Facebook. Mục đích của ReactJS là tạo ra các ứng dụng web hấp dẫn với tốc độ cao và hiệu quả với mã hóa tối thiểu. Cụ thể, mọi trang web khi sử dụng ReactJS đều yêu cầu nó phải hoạt động trơn tru, nhanh chóng và khả năng mở rộng cao, đồng thời thực hiện đơn giản.

Redux là front-end hay back-end?

Về cơ bản, Redux có thể được sử dụng cho phía máy khách (Front-End) với các giao diện người dùng. Tuy nhiên, vì Redux là một thư viện JavaScript nên nó cũng có thể được sử dụng ở phía máy chủ (Back-End).

Redux có đáng học không?

Bạn nên học Redux. Vì nó là thư viện quản lý trạng thái phổ biến nhất cho các ứng dụng React. Nhưng Redux không dễ học, vì vậy việc biết cách thức hoạt động của thư viện này sẽ rất hữu ích trước khi phải làm việc chăm chỉ cho một dự án sử dụng Redux.

Những công ty nào đã và đang sử dụng Redux?

Hiện tại, hơn 17.000 nhà phát triển trên StackShare tuyên bố đã sử dụng Redux.

Các công ty hàng đầu đã báo cáo sử dụng Redux trong kho công nghệ của họ bao gồm Instagram, Amazon, Robinhood, v.v.

CÔNG TY TNHH TẬP ĐOÀN TINO

  • Trụ sở chính: L17-11, Lầu 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn, P. Bến Nghé, Q.1, TP.
    VPĐD: 42 Trần Phú, P.4, Q.5, TP.HCM
  • Điện thoại: 0364 333 333
    Tổng đài miễn phí: 1800 6734
  • Email: sales@tino.org
  • Trang web: www.tino.org