Bạn đang xem: Redux là gì
Trong bài viết này, sẽ cho bạn biết một số lý do tại sao bạn nên sử dụng Redux bằng cách xem xét về lợi ích của nó. Đầu tiên, chúng ta sẽ tìm hiểu những điều cơ bản của Redux và cách thức hoạt động của nó. Sau đó, chúng ta sẽ thấy việc sử dụng Redux có thể giúp ứng dụng của bạn bằng cách sử dụng một số component đơn giản nhưng thiết thực.
Redux & React NativeRedux là gì?
Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger.
You can use Redux together with React, or with any other view library. It is tiny (2kB, including dependencies), but has a large ecosystem of addons available. — https://redux.js.org/
Redux là một predictable state management tool (thùng chứa trạng thái có thể dự đoán được) cho các ứng dụng JavaScript. Nó giúp bạn viết các ứng dụng hoạt động ổn định, chạy trong các môi trường khác nhau (client, server, and native) và dễ kiểm tra.
Nói một cách đơn giản, Redux là một công cụ quản lý state. Mặc dù nó được sử dụng chủ yếu với React, nhưng nó có thể được sử dụng với bất kỳ Framework hoặc thư viện JavaScript khác. Nó rất nhẹ khoản 2KB (bao gồm cả dependencies), vì vậy bạn không phải lo lắng về việc nó làm cho ứng dụng của bạn nặng hơn.
Với Redux, state của ứng dụng được giữ trong một store và mỗi component có thể truy cập bất kỳ state nào mà nó cần từ store này.
Tại sao bạn cần một công cụ quản lý State
Ở đầu bài viết này, tôi đã nói rõ rằng Redux là một công cụ quản lý state, nhưng bây giờ, hãy để xem xét lại lý do tại sao bạn cần một công cụ quản lý state.
Hầu hết các thư viện như React, Angular, v.v. được xây dựng với cách để các component quản lý nội bộ state của chúng mà không cần đến thư viện hoặc công cụ bên ngoài. Nó hoạt động tốt cho các ứng dụng có ít component nhưng khi ứng dụng phát triển lớn hơn, việc quản lý các state được chia sẻ giữa các component trở thành một việc nhỏ nhặt.
Trong một ứng dụng nơi dữ liệu được chia sẻ giữa các component, rất khó để biết được thực sự một state đang hoạt động ở đâu. Tốt nhất là dữ liệu trong một component chỉ nên hoạt động trong một component. Vì vậy, việc chia sẻ dữ liệu giữa các component anh em trở nên khó khăn.
Chẳng hạn, trong React, để chia sẻ dữ liệu giữa anh em, một state phải live trong component cha mẹ. Mọi phương thức để cập nhật state này phải được cung cấp bởi component cha mẹ và được chuyển như một props cho các component con.
Dưới đây, một ví dụ đơn giản về một component đăng nhập trong Reac:
class App extends React.Component { constructor(props) { super(props); // First the Parent creates a state for what will be passed this.state = { userStatus: “NOT LOGGED IN”} this.setStatus = this.setStatus.bind(this); } // A method is provided for the child component to update the state of the // userStatus setStatus(username, password) { const newUsers = users; newUsers.map(user => { if (user.username == username && user.password === password) { this.setState({ userStatus: “LOGGED IN” }) } }); } render() { return (
// the state is passed to the sibling as a props as is updated whenever // the child component changes the input // this method is passed to the child component as a props which it // uses to change the state of the userStatus
); }});Bây giờ hãy tưởng tượng những gì xảy ra khi một State phải được chia sẻ giữa các component cách xa nhau trong component tree. State phải được truyền từ component này sang component khác cho đến khi đến nơi cần thiết.
Về cơ bản, State sẽ phải được nâng lên component cha mẹ gần nhất và tiếp theo cho đến khi nó đến một tổ tiên chung cho cả hai component cần State và sau đó nó được truyền lại. Điều này làm cho State khó maintain và khó dự đoán. Nó cũng có nghĩa là truyền dữ liệu đến các component không cần dữ liệu đó.
Rõ ràng việc quản lý State trở nên lộn xộn khi ứng dụng trở nên phức tạp. Đây là lý do tại sao bạn cần một công cụ quản lý State như Redux giúp quản lý các State này dễ dàng hơn. Hãy có một cái nhìn tổng quan tốt về Redux trước khi xem xét đến lợi ích của nó.
Cách Redux hoạt động
Cách Redux hoạt động rất đơn giản. Có một Store trung tâm chứa toàn bộ State của ứng dụng. Mỗi component có thể truy cập State được lưu trữ mà không phải gửi props từ component này sang component khác.
Redux có ba phần: Actions, Store và reducers. Hãy xem qua những gì Redux có thể làm được. Điều này rất quan trọng vì sẽ giúp bạn hiểu được lợi ích của Redux và cách sử dụng nó. Tôi sẽ làm một ví dụ tương tự như phần đăng nhập ở trên nhưng lần này là trong Redux.
Actions trong Redux
Nói một cách đơn giản, actions là event. Chúng là cách duy nhất bạn có thể gửi dữ liệu từ ứng dụng của mình đến Store của Redux. Dữ liệu có thể là từ các tương tác của người dùng, các lệnh gọi API hoặc thậm chí là gửi form.
Các action được gửi bằng phương thức store.dispatch (). Các actions là các JavaScript object đơn giản và chúng phải có thuộc tính loại để chỉ ra loại actions sẽ được thực hiện. Nó cũng phải có một payload chứa thông tin cần được xử lý. Action được tạo thông qua một action creator.
Xem thêm: Indicator Là Gì – định Nghĩa, Ví Dụ, Giải Thích
Dưới đây, một ví dụ về actions có thể được thực hiện trong quá trình đăng nhập trong ứng dụng:
{ type: “LOGIN”, payload: { username: “foo”, password: “bar” }}Dưới đây là một ví dụ về action creator:
const setLoginStatus = (name, password) => { return { type: “LOGIN”, payload: { username: “foo”, password: “bar” } }}Như đã giải thích trước đó, actions phải chứa thuộc tính loại type và sau đó payload sẽ được lưu trữ.
Reducers trong Redux
Reducers là các hàm thuần túy lấy State hiện tại của ứng dụng, thực hiện một action và trả về State mới. Các State này được lưu trữ dưới dạng đối tượng object và chúng xác định State của ứng dụng thay đổi như thế nào để đáp ứng với action được gửi đến Store.
Dưới đây là một ví dụ về cách reducers hoạt động trong Redux:
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; } };Reducers lấy State trước của ứng dụng và trả về State mới dựa trên action được truyền cho nó.
Là các hàm thuần túy, chúng không thay đổi dữ liệu trong đối tượng object được truyền cho nó trong ứng dụng. Cho cùng một đối tượng, nó sẽ luôn tạo ra cùng một kết quả.
Store trong Redux
Stores giữ State ứng dụng. Chỉ có một store trong bất kỳ ứng dụng Redux nào. Bạn có thể truy cập state được lưu trữ, cập nhật state và đăng ký hoặc hủy đăng ký listeners thông qua các phương thức trợ giúp.
Cách tạo một store cho ứng dụng đăng nhập:
const store = createStore(LoginComponent);Các actions được thực hiện trên State luôn trả về một State mới. Vì vậy, State đơn giản và có thể dự đoán.
Bây giờ chúng ta đã biết thêm một chút về Redux, hãy để Lùi quay lại ví dụ đăng nhập đã được triển khai trước đó và xem Redux có thể cải thiện như thế nào.
class App extends React.Component { render() { return (
) }}Với Redux, có một State chung trong Store và mỗi component có quyền truy cập vào State. Điều này giúp loại việc phải liên tục chuyển State từ component này sang component khác.
Khi sử dụng Redux với React, các State sẽ không còn cần phải được nâng lên, do đó nó giúp bạn dễ dàng theo dõi hành động nào gây ra bất kỳ thay đổi nào. Như đã thấy ở trên, component này không cần cung cấp bất kỳ State hoặc phương thức nào cho các component con của nó để chia sẻ dữ liệu với nhau. Mọi thứ đều được xử lý bởi Redux. Điều này giúp đơn giản hóa rất nhiều ứng dụng và giúp bảo trì dễ dàng hơn.
Đó là lợi ích chính và lý do tại sao bạn nên sử dụng Redux. Dưới đây là tóm tắt các lý do khác tại sao bạn nên sử dụng Redux:
Những lợi ích khác của việc sử dụng ReduxRedux làm cho State dễ dự đoán.Trong Redux, State luôn có thể dự đoán được. Nếu cùng một State và action được chuyển đến một reducers, thì kết quả tương tự luôn được tạo ra vì các reducers là các hàm thuần túy. State cũng bất biến và không bao giờ thay đổi. Điều này cho phép thực hiện các nhiệm vụ khó khăn như hoàn tác vô hạn và làm lại. Cũng có thể thực hiện “du hành thời gian”, đó là khả năng di chuyển qua lại giữa các State trước đó và xem kết quả trong thời gian thực.Bảo trì.Redux rất nghiêm ngặt về cách tổ chức mã để giúp người có kiến thức về Redux dễ hiểu hơn về cấu trúc của bất kỳ ứng dụng Redux nào. Điều này làm cho nó dễ dàng hơn để bảo trì.Gỡ lỗi trong nhiều ngày.Redux giúp dễ dàng gỡ lỗi một ứng dụng. Bằng cách ghi nhật ký action và state, thật dễ hiểu lỗi mã hóa, lỗi mạng và các dạng lỗi khác có thể xảy ra trong quá trình hoàn tiện ứng dụng.Dễ kiểm traThật dễ dàng để kiểm tra các ứng dụng Redux vì các chức năng được sử dụng để thay đổi state của các chức năng thuần túy.Bạn có thể duy trì một số state ứng dụng vào bộ nhớ cục bộ và khôi phục nó sau khi làm mới. Điều này có thể thực sự tiện lợi.Redux cũng có thể được sử dụng để kết xuất phía server. Với nó, bạn có thể xử lý kết xuất ban đầu của ứng dụng bằng cách gửi state của ứng dụng đến server cùng với phản hồi của nó đối với yêu cầu server. Các component cần thiết sau đó được hiển thị trong HTML và được gửi cho clients.Kết luận
Tôi đã chia sẽ về các tính năng chính của Redux và tại sao Redux có lợi cho ứng dụng của bạn. Mặc dù Redux có lợi ích của nó, nhưng điều đó không có nghĩa là bạn nên thêm Redux vào tất cả các ứng dụng của mình. Ứng dụng của bạn vẫn có thể hoạt động tốt mà không cần Redux.
Xem thêm: Các đầu Số Hợp Tuổi Thìn 0904, 0914 Là Mạng Gì
Một lợi ích lớn của Redux là thêm hướng mới để giải quyết vấn đề. Tuy nhiên, bạn chỉ nên thực hiện Redux nếu bạn xác định dự án của bạn cần một công cụ quản lý State.
Chuyên mục: Hỏi Đáp
