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

Nguồn bài viết: Redux là gì? Cấu trúc của Redux như thế nào?

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 thuthuatkiemtien.com 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ể hoạt động nhất quán trong môi trường máy khách, máy chủ và kỹ thuật số, đồng thời 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ỳ Thư viện hoặc Khung JavaScript nào khác. Redux khá nhẹ, chỉ 2KB (bao gồm cả phần phụ thuộc). Vì vậy, bạn không phải lo lắng về việc công cụ này sẽ làm cho kích thướ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 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 nào mà ứng dụng cần từ Cửa hàng này.

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 nâng cấp, điều này giúp người dùng theo dõi các thay đổi trong hành động dễ dà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 giữa chúng. 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.

Lợi ích của Redux

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

Redux có các chức 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ả.

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ì.

Bên cạnh đó, 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 được cũng như có thể bảo trì được.

Gỡ lỗi 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 gỡ lỗi dễ dàng hơn.

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ộ để thành phần được kết nối của riêng bạn chỉ hiển thị khi nó thực sự cần thiết.

Dễ dàng kiểm tra

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 bền bỉ

Bạn có thể duy trì một số trạng thái của ứng dụng trong bộ nhớ cục bộ và khôi phục 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 các máy chủ nơi Redux có thể được hiển thị, người dùng có thể xử lý kết xuất ban đầu của chương trình bằng cách truyền các trạng thái đến máy chủ và chờ phản hồi từ nó.

Cấu trúc của Redux

Cách thức hoạt động của Redux tương đối đơn giản. Có một cửa hàng trung tâm lưu giữ 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: Actions, Reducers và Store.

Hành động

Hành động có thể hiểu là 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 truyền có thể là yêu cầu từ người dùng, ứng dụng, lệnh gọi API hoặc gửi biểu mẫu.

Sự kiện sẽ được gử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 thực hiện. Vùng chứa thông tin đó được gọi là “trọng tải” và sự kiện được tạo thông qua Trình tạo hành động. Khi thực hiện tính toán 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.

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

{

type: "LOGIN",

payload: {

username: "foo",

password: "bar"

}

}

Đây là một ví dụ về Action Creator

const setLoginStatus = (name, password) => {

return {

type: "LOGIN",

payload: {

username: "foo",

password: "bar"

}

}

}

Bộ giảm tốc

Nếu 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 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 các đối tượng và chúng cũng xác định cách trạng thái của ứng dụng thay đổi để đáp ứng với một Hành động được gửi đến Cửa hàng.

Các bộ giảm thiểu dựa trên 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 hiện 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 tại 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ì chức năng và nhiệm vụ của nó, để kích hoạt các Hành động được thực hiện phải sử dụng các phần tử điều phối rồi gửi đến bộ giảm thiểu.

Tạo Cửa hàng để đă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 xây dựng 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ỉ cho phép trạng thái đã đọc. Nói một cách đơ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 đột biến thuần túy với mục đích chỉ ra trạng thái nên được chuyển đổi như thế nào từ Hành động. Do đó, bạn cần sử dụng các chức năng thuần túy được gọi là Reducers.

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

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 chạy mượt mà, nhanh chóng, 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 là rất hữu ích trước khi bạn phải làm việc chuyên sâu vào 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 lớn được 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 CỔ PHẦN 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 cước: 1800 6734
Email: sales@tino.org
Trang web: www.tino.org

Xem thêm nhiều bài viết về : Kiến Thức Cơ Bản

from thuthuatkiemtien.com https://ift.tt/3qLGL0R
via thuthuatkiemtien.com

Tìm kiếm Blog này

Thuthuatkiemtien.com