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é!
Nội dung chí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 điệu trong những môi trường tự nhiên 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 hầu hết đượ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 kích cỡ 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.
Bạn đang đọc: Redux là gì? Cấu trúc của Redux như thế nào?
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 biến hóa 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 tiến 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 thực thi 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 để biến hóa 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 bắt đầ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 bộc 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, cho nên vì thế 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 thực thi 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 miêu 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 đã đổi khác 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 đó thực thi 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 dùng và đồng thời chúng xác lập trạng thái của ứng dụng đổi khác 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 chiêu thức 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.
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 triển khai đơ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 thông dụng nhất cho những ứng dụng React. Nhưng Redux không phải dễ để 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: sales@tino.org
- Website: www.tino.org
Source: http://139.180.218.5
Category: Thuật ngữ đời thường