Redux là gì? Cấu trúc của Redux như thế nào?

Chắc hẳn các bạn cũng đã 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 của JavaScript được nhiều người lựa chọn. Tuy nhiên, không phải tất cả chúng ta đều biết cách sử dụng thư viện này ra sao. Vậy Redux là gì? Để tìm hiểu chi tiết về Redux, các bạn 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 hoàn toàn có thể Dự kiến được hay còn biết đến là một thư viện của JavaScript. Thư viện này được phong cách thiết kế để giúp bạn viết những ứng dụng JavaScript hoàn toàn có thể hoạt động giải trí đồng nhất trong những thiên nhiên và môi trường máy khách, sever và thiên nhiên và môi trường số, đồng thời được cho phép thuận tiện kiểm tra .
Mặc dù Redux đa phần được sử dụng như một công cụ quản trị trạng thái với React, nhưng bạn hoàn toàn có thể sử dụng thư viện này với bất kể Framework hoặc thư viện JavaScript nào khác. Redux khá nhẹ, chỉ ở mức 2KB ( gồm có cả phần phụ thuộc ). Vì vậy, bạn không phải lo ngại về việc công cụ này sẽ làm cho size nội dung ứng dụng của bạn lớn hơn .

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

Tại sao cần sử dụng Redux?

Khi sử dụng phối hợp Redux với Reactjs, những trạng thái không nhất thiết phải được tăng cấp, điều này sẽ giúp người dùng thuận tiện theo dõi những đổi khác của những action hơn. Các thành phần cũng sẽ không dùng bất kể những trạng thái hay phương pháp nào để cho những thành phần con được quyền san sẻ tài liệu giữa chúng. Khi mọi quá trình đều có sự can thiệp của Redux, ứng dụng sẽ được đơn giản hóa và thuận tiện bảo dưỡng hơn .

Những lợi ích của Redux

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

Redux có công dụng Dự kiến và quản trị trạng thái và chúng sẽ không khi nào đổi khác. Lợi ích này hoàn toàn có thể giúp người dùng triển khai những trách nhiệm 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ó tính năng luân chuyển linh động giữa những trạng thái để kiểm tra hiệu suất cao trong thời hạn thực .

Khả năng bảo trì

Redux có một mạng lưới hệ thống code cực kỳ khắt khe, nhưng với những người đã sử dụng và hiểu về Redux sẽ tiếp cận thuận tiện hơn. Cũng chính việc này đã giúp cho Redux hoàn toàn có thể được bảo dưỡng một cách thuận tiện .
Bên cạnh đó, quyền lợi này còn góp thêm phần giúp người dùng tách biệt logic nhiệm vụ khỏi sơ đồ thành phần. Trong khi đó, tiềm năng quan trọng của những ứng dụng có quy mô lớn lúc bấy giờ đều là hướng cho ứng dụng của mình hoàn toàn có thể Dự kiến cũng như bảo dưỡng được

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

Redux được cho phép người dùng gỡ lỗi thuận tiện bằng cách lưu lại những kích hoạt và trạng thái để dễ nhận diện so với những trường hợp lỗi mã hóa, lỗi mạng và một số ít lỗi khác khi định dạng trong quy trình tiến hành chương trình. Việc gỡ lỗi thường thì sẽ cần nhiều thời hạn và phức tạp nhưng với Redux DevTools của Redux sẽ tương hỗ người dùng thực thi thao tác gỡ lỗi thuận tiện hơn .

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

React Redux triển khai nhiều tối ưu hóa hiệu suất bên trong để thành phần được liên kết của riêng bạn chỉ hiển thị khi thực sự cần .

ADVERTISEMENT

Dễ kiểm tra

Tương đối thuận tiện để kiểm tra những ứng dụng Redux vì những tính năng được sử dụng để đổi khác trạng thái của những tính năng thuần túy .

Trạng thái bền bỉ

Bạn hoàn toàn có thể duy trì 1 số ít trạng thái của ứng dụng trong bộ nhớ cục bộ và Phục hồi chúng sau khi làm mới. Điều này thực sự thuận tiện .

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

Trên sever hoàn toàn có thể để Redux được hiển thị, người dùng hoàn toàn có thể giải quyết và xử lý những kết xuất khởi đầu của chương trình bằng cách truyền tải những trạng thái đến những sever và đợi phản hồi từ nó .

Cấu trúc của Redux

Cách thức hoạt động giải trí của Redux tương đối đơn thuần. Có một store TT lưu giữ hàng loạt trạng thái của ứng dụng. Mỗi thành phần hoàn toàn có thể truy vấn vào trạng thái đã được tàng trữ mà không cần phải gửi những đạ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 : Actions, Reducers và Store .

Actions

Actions hoàn toàn có thể hiểu là những sự kiện trong chương trình. Đây là cách duy nhất để người dùng truyền tải data từ ứng dụng đến Store trong Redux, tài liệu được truyền tài hoàn toàn có thể là những nhu yếu từ người dùng, ứng dụng, API call hoặc form submission .
Các sự kiện sẽ được gửi với phương pháp store.dispatch ( ). Cần phải biểu lộ rõ loại sự kiện trải qua loại giá trị thì nhu yếu mới hoàn toàn có thể được thực thi. Nơi chứa những thông tin đó được gọi là “ payload ” và sự kiện được tạo trải qua Action Creator. Khi những phép tính thực thi những Actions sẽ hoàn trả một state mới trọn vẹn, vì vậy tính Dự kiến của trạng thái này rất cao và dễ dùng .
Dưới đây là một ví dụ về sự kiện hoàn toàn có thể được triển khai trong quy trình đăng nhập trong ứng dụng :

{

type: "LOGIN",

payload: {

username: "foo",

password: "bar"

}

}

Dưới đây là ví dụ về Action Creator

const setLoginStatus = (name, password) => {

return {

type: "LOGIN",

payload: {

username: "foo",

password: "bar"

}

}

}

Reducers

Nếu Actions có trách nhiệm diễn đạt những gì xảy ra nhưng lại không chỉ rõ phần trạng thái nào của response đã biến hóa và biến hóa như thế nào, khi đó Reducer sẽ đảm nhiệm việc này. Reducers được xem là những hàm thuần túy lấy trạng thái hiện tại của ứng dụng sau đó triển khai một kích hoạt và trả về trạng thái mới. Các trạng thái này sẽ được tàng trữ dưới dạng đối tượng người tiêu dùng và đồng thời chúng xác lập trạng thái của ứng dụng biến hóa như thế nào để cung ứng với kích hoạt được gửi đến Store .
Reducers dựa trên hàm “ reduce ” của JavaScript, trong đó một giá trị sẽ được tính từ nhiều giá trị sau khi thực thi công dụng 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;

}

};

Store

Store là chương trình duy nhất tại Redux tương hỗ tàng trữ trạng thái ứng dụng hay hoàn toàn có thể nói chỉ có một Store trong bất kể ứng dụng Redux nào. Store được cho phép người dùng hoàn toàn có thể liên tục truy vấn vào những chương trình đã được lưu và hoàn toàn có thể can thiệp vào chúng trải qua những giải pháp tương hỗ gồm update, ĐK hoặc hủy .

Trong Redux, Store đóng vai trò quan trọng nhất bởi chức năng và nhiệm vụ của mình, để 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.

Tạo Store để đăng nhập :
const store = createStore ( LoginComponent ) ;

Nguyên lý vận hành cơ bản của React Redux

Trong quy trình thiết kế xây dựng Redux, những chuyên viên đã dựa vào 3 nguyên tắc cơ bản sau đây :

• Sử dụng nguồn dữ liệu đảm bảo tin cậy. Các state của tất cả ứng dụng đều nằm cùng một object tree trong một Store duy nhất.
• Chỉ được phép đọc trạng thái. Hiểu đơn giản, để thay đổi trạng thái của ứng dụng, cách duy nhất là thực hiện một Action.
• Sử dụng các 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ế, bạn mới cần sử dụng các pure function được gọi là Reducer.

Sự sinh ra của Redux so với người dùng như một nâng cấp cải tiến với cách sử dụng thuận tiện cùng với nhiều tính năng có ích. Bài viết trên đã phân phối cho bạn những thông tin về Redux. Để hoàn toàn có thể tưởng tượng và chớp lấy tiến trình thao tác của Redux một cách rõ ràng, bạn nên tìm hiểu thêm 1 số ít tài liệu nâng cao hơn nhé !

FAQs về Redux

ReactJS là gì?

ReactJS là một thư viện thuộc JavaScript có mã nguồn mở. Cha đẻ của ReactJS chính là Facebook. Mục đích sinh ra của ReactJS là để tạo ra những ứng dụng website mê hoặc với vận tốc nhanh và hiệu suất cao cao với những mã hóa tối thiểu. Cụ thể, mỗi website khi đã sử dụng ReactJS nhu yếu phải chạy thật mượt, thật nhanh và có năng lực lan rộng ra cao, đồng thời phải thực thi đơn thuần .

Redux là Front-End hay Back-End?

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

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

Bạn nên học Redux. Vì đây là thư viện quản trị trạng thái phổ cập nhất cho những ứng dụng React. Nhưng Redux không phải dễ để tìm hiểu và khám phá, thế cho nên việc biết cách hoạt động giải trí của thư viện này là rất hữu dụng trước khi bạn phải thao tác nâng cao trong một dự án Bất Động Sản có sử dụng Redux .

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

Hiện nay, đã có hơn 17000 nhà tăng trưởng trên StackShare công bố rằng họ đã sử dụng Redux .
Những công ty lớn được báo cáo giải trình sử dụng Redux trong kho công nghệ tiên tiến của họ gồm Instagram, Amazon, Robinhood, ..

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

• Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí Minh
  Văn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
• Điện thoại: 0364 333 333
  Tổng đài miễn phí: 1800 6734
• Email: [email protected]
• Website: www.tino.org

Source: https://final-blade.com
Category: Kiến thức Internet