Redux là gì? Khái niệm cách thức hoạt động và thông tin A đến Z

1. Redux là gì? Nguyên tắc hoạt động của nó như thế nào?

Redux là gì? Redux là một vùng chứa trạng thái có thể dự đoán được cho các ứng dụng JavaScript. Khi ứng dụng phát triển, thật khó để giữ cho nó có tổ chức và duy trì luồng dữ liệu. Redux giải quyết vấn đề này bằng cách quản lý trạng thái của ứng dụng với một đối tượng toàn cầu duy nhất được gọi là Store. Các nguyên tắc cơ bản của Redux giúp duy trì tính nhất quán trong suốt ứng dụng của bạn, giúp gỡ lỗi và kiểm tra dễ dàng hơn.

Quan trọng hơn, nó cung cấp cho bạn khả năng chỉnh sửa mã trực tiếp kết hợp với trình gỡ lỗi du hành thời gian. Có thể linh hoạt đi với bất kỳ lớp chế độ xem nào như React, Angular, Vue, … Nguyên tắc của Redux dựa dựa trên khả năng dự đoán của nó. Khả năng dự đoán của Redux được xác định bởi ba nguyên tắc quan trọng nhất được đưa ra dưới đây:

- Nguồn store duy nhất: Trạng thái của toàn bộ ứng dụng của bạn được lưu trữ trong một cây đối tượng trong một cửa hàng duy nhất. Vì toàn bộ trạng thái ứng dụng được lưu trữ trong một cây duy nhất nên việc gỡ lỗi trở nên dễ dàng và phát triển nhanh hơn.

- Trạng thái là “Chỉ đọc”: Cách duy nhất để thay đổi trạng thái là phát ra một hành động, một đối tượng mô tả những gì đã xảy ra. Điều này có nghĩa là không ai có thể trực tiếp thay đổi trạng thái ứng dụng của bạn. Các thay đổi được thực hiện với các chức năng thuần túy.

Để chỉ định cách cây trạng thái được chuyển đổi bằng các hành động, bạn viết các bộ giảm thuần túy. Bộ giảm tốc là nơi trung tâm diễn ra việc sửa đổi trạng thái. Reducer là một hàm lấy trạng thái và hành động làm đối số và trả về trạng thái mới được cập nhật.

Xem ngay: Việc làm javascript

2. Cài đặt Redux như thế nào?

Trước khi cài đặt Redux, chúng ta phải cài đặt Nodejs và NPM. Dưới đây là các hướng dẫn sẽ giúp bạn cài đặt nó. Bạn có thể bỏ qua các bước này nếu bạn đã cài đặt Nodejs và NPM trong thiết bị của mình.  Chạy trình cài đặt, làm theo hướng dẫn và chấp nhận thỏa thuận cấp phép.

Đầu tiên, bạn truy cập vào trang web của Nodejs và tải xuống, cũng như cài đặt tệp gói này. Sau đó bạn khởi động lại thiết bị của bạn để chạy nó. Bạn có thể kiểm tra cài đặt thành công bằng cách mở dấu nhắc lệnh và gõ nút -v. Thao tác này sẽ hiển thị cho bạn phiên bản Node mới nhất trong hệ thống của bạn.

Để kiểm tra xem npm đã được cài đặt thành công hay chưa, bạn có thể nhập npm –v để trả về phiên bản npm mới nhất. Để cài đặt redux, bạn có thể làm theo các bước sau:

- Chạy lệnh sau trong dấu nhắc lệnh của bạn để cài đặt Redux: npm install - lưu redux.

- Để sử dụng Redux với ứng dụng react, bạn cần cài đặt thêm một phần phụ thuộc như sau: npm install --save react-redux.

- Để cài đặt các công cụ dành cho nhà phát triển cho Redux, bạn cần cài đặt phần phụ thuộc sau: Chạy lệnh dưới đây trong dấu nhắc lệnh của bạn để cài đặt Redux devtools: npm install --save-dev redux-devtools

Nếu bạn không muốn cài đặt các công cụ dành cho nhà phát triển Redux và tích hợp nó vào dự án của mình, bạn có thể cài đặt Phần mở rộng Redux DevTools cho Chrome và Firefox. Mọi đoạn mã trong ứng dụng của bạn không thể thay đổi trạng thái này. Để thay đổi trạng thái, bạn cần gửi một Redux core. Một hành động là một đối tượng đơn giản mô tả ý định gây ra thay đổi với một thuộc tính kiểu. Nó phải có thuộc tính type cho biết loại hành động nào đang được thực hiện.

Các hành động và trạng thái được tổ chức cùng nhau bởi một chức năng gọi là Bộ giảm tốc. Một hành động được thực hiện với ý định gây ra thay đổi. Sự thay đổi này được thực hiện bởi bộ giảm tốc. Giảm tốc là cách duy nhất để thay đổi trạng thái trong Redux, làm cho nó dễ dự đoán, tập trung và dễ gỡ lỗi hơn. Một hàm rút gọn xử lý hành động “ITEMS_REQUEST”.

Tham khảo ngay: Việc làm nodejs

3. Cách thức làm việc của Redux như thế nào?

Redux tuân theo luồng dữ liệu một chiều. Nó có nghĩa là dữ liệu ứng dụng của bạn sẽ tuân theo luồng dữ liệu ràng buộc một chiều. Khi ứng dụng phát triển và trở nên phức tạp, thật khó để tái tạo các vấn đề và thêm các tính năng mới nếu bạn không kiểm soát được trạng thái ứng dụng của mình. Redux giảm độ phức tạp của mã bằng cách thực thi hạn chế về cách thức và thời điểm cập nhật trạng thái có thể xảy ra. Bằng cách này, quản lý các trạng thái cập nhật rất dễ dàng. Chúng ta đã biết về các hạn chế như ba nguyên tắc của Redux. Sơ đồ sau sẽ giúp bạn hiểu rõ hơn về luồng dữ liệu Redux:

- Người dùng Redux core với ứng dụng khi thực hiện những tương tác của mình.

- Chức năng rút gọn gốc được gọi với trạng thái hiện tại và hành động được điều động. Bộ giảm tốc gốc có thể phân chia nhiệm vụ cho các chức năng bộ giảm thiểu nhỏ hơn, cuối cùng trả về một trạng thái mới. Bạn có thể xem lại trạng thái này một lần nữa trước khi quyết định có sử dụng nó hay không.

Redux store là một cây đối tượng bất biến trong Redux, là một vùng chứa trạng thái chứa trạng thái của ứng dụng. Redux chỉ có thể có một cửa hàng duy nhất trong ứng dụng của bạn. Bất cứ khi nào một Redux store được tạo trong Redux, bạn cần chỉ định trình giảm bớt.

Các lệnh là các nguồn thông tin duy nhất cho cửa hàng theo tài liệu chính thức của Redux. Nó mang một lượng lớn thông tin từ ứng dụng của bạn để lưu trữ. Như đã thảo luận trước đó, các hành động là đối tượng JavaScript thuần túy phải có thuộc tính type để chỉ ra loại hành động được thực hiện. Nó cho chúng ta biết điều gì đã xảy ra. Các loại phải được định nghĩa là hằng số chuỗi trong ứng dụng của bạn như được cung cấp theo lệnh: const ITEMS_REQUEST = 'ITEMS_REQUEST'.

Ngoài thuộc tính type này, cấu trúc của một đối tượng action hoàn toàn phụ thuộc vào nhà phát triển. Bạn nên giữ đối tượng hành động của mình càng nhẹ càng tốt và chỉ chuyển những thông tin cần thiết. Để thực hiện bất kỳ thay đổi nào trong cửa hàng, trước tiên bạn cần thực hiện một lệnh bằng cách sử dụng hàm store, dispatch. Đối tượng lệnh như sau: {type: GET_ORDER_STATUS, payload: {orderId, userId}} {type: GET_WISHLIST_ITEMS, payload: userId}.

Người tạo hành động là các chức năng gói gọn quá trình tạo một đối tượng hành động. Các hàm này chỉ đơn giản trả về một đối tượng Js thuần túy là một hành động. Nó thúc đẩy việc viết mã sạch và giúp đạt được khả năng tái sử dụng. Trình cho phép một lệnh sẽ là ‘ITEMS_REQUEST’ yêu cầu dữ liệu danh sách mặt hàng sản phẩm từ máy chủ.  Trong khi đó, trạng thái isLoading được thực hiện đúng trong loại hành động ‘ITEMS_REQUEST’ để cho biết các mục đang tải và dữ liệu vẫn không được nhận từ máy chủ.

Ban đầu, trạng thái isLoading là sai trong đối tượng InitialState giả sử không có gì đang tải. Khi dữ liệu được nhận tại trình duyệt, trạng thái isLoading sẽ được trả về là false trong loại hành động ‘ITEMS_REQUEST_SUCCESS’ trong trình rút gọn tương ứng. Trạng thái này có thể được sử dụng như một chỗ dựa trong các thành phần phản ứng để hiển thị trình tải / thông báo trên trang của bạn trong khi yêu cầu dữ liệu được bật.

cv xin việc it

4. Redux — Pure Functions: Hàm trong Redux là gì?

Một hàm là một quá trình nhận đầu vào được gọi là đối số và tạo ra một số đầu ra được gọi là giá trị trả về. Một hàm được gọi là thuần nếu nó tuân theo các quy tắc sau:

- Một hàm trả về cùng một kết quả cho các đối số giống nhau.

- Đánh giá của nó không có tác dụng phụ, tức là nó không làm thay đổi dữ liệu đầu vào.   Không đột biến biến cục bộ và biến toàn cục.

- Nó không phụ thuộc vào trạng thái bên ngoài như một biến toàn cục. Chúng ta hãy lấy ví dụ về một hàm trả về hai lần giá trị được truyền làm đầu vào cho hàm.  Nói chung, nó được viết là, f (x) => x * 2. Nếu một hàm được gọi với giá trị đối số 2, thì đầu ra sẽ là 4, f (2) => 4.

Theo ba nguyên tắc trong Redux, các thay đổi phải được thực hiện bởi một hàm thuần túy, tức là bộ giảm thiểu trong Redux. Bây giờ, một câu hỏi được đặt ra là tại sao một bộ giảm tốc phải là một hàm thuần túy. Giả sử, bạn muốn gửi một hành động có loại là 'ADD_TO_CART_SUCCESS' để thêm một mặt hàng vào ứng dụng giỏ hàng của bạn bằng cách nhấp vào nút thêm vào giỏ hàng.

Giảm thiểu là một chức năng thuần túy trong Redux. Các chức năng thuần túy có thể dự đoán được.  Bộ giảm thiểu là cách duy nhất để thay đổi trạng thái trong Redux. Nó là nơi duy nhất mà bạn có thể viết logic và tính toán. Hàm Reducer sẽ chấp nhận trạng thái trước của ứng dụng và hành động đang được gửi đi, tính toán trạng thái tiếp theo và trả về đối tượng mới.

Một số điều sau đây không bao giờ được thực hiện bên trong bộ giảm tốc:

- Sự đột biến của các đối số hàm

- Lệnh gọi API & logic định tuyến

- Gọi hàm không thuần túy v.d. Math.random

Sau đây là cú pháp của một bộ rút gọn: (trạng thái, hành động) => Trạng thái mới

5. Một số thông tin khác về Redux cho bạn

5.1. Relux - phần mềm trung gian

Bản thân Redux là đồng bộ, vậy các hoạt động bất đồng bộ như yêu cầu mạng hoạt động với Redux như thế nào? Đây là phần mềm trung gian có ích gì. Như đã thảo luận trước đó, bộ giảm là nơi ghi tất cả logic thực thi.  Reducer không liên quan đến việc ai thực hiện nó, mất bao nhiêu thời gian hoặc ghi trạng thái của ứng dụng trước và sau khi hành động được thực hiện.

Trong trường hợp này, chức năng phần mềm trung gian của Redux cung cấp một phương tiện để tương tác với hành động được gửi đi trước khi chúng tiếp cận trình giảm thiểu. Các chức năng phần mềm trung gian được tùy chỉnh có thể được tạo ra bằng cách viết các hàm bậc cao (một hàm trả về một hàm khác), nó bao quanh một số logic. Nhiều phần mềm trung gian có thể được kết hợp với nhau để thêm chức năng mới và mỗi phần mềm trung gian không yêu cầu kiến ​​thức về những gì xảy ra trước và sau. Bạn có thể tưởng tượng phần mềm trung gian ở đâu đó giữa hành động được gửi đi và trình giảm thiểu.

Thông thường, phần mềm trung gian được sử dụng để xử lý các hành động không đồng bộ trong ứng dụng của bạn. Redux cung cấp API được gọi là apply Middleware cho phép chúng ta sử dụng phần mềm trung gian tùy chỉnh cũng như phần mềm trung gian Redux như redux-thunk và redux-promise. Nó áp dụng phần mềm trung gian để lưu trữ. Cú pháp sử dụng API applyMiddleware là: applyMiddleware (... phần mềm trung gian) và điều này có thể được áp dụng để lưu trữ như sau: nhập {createStore, applyMiddleware} từ 'redux'; nhập thunk từ 'redux-thunk'; nhập rootReducer từ './reducers/index';

Phần mềm trung gian sẽ cho phép bạn viết một trình điều phối hành động trả về một hàm thay vì một đối tượng hành động. Câu lệnh điều kiện có thể được viết bên trong phần mềm trung gian. Mỗi phần mềm trung gian nhận được công văn của cửa hàng để chúng có thể gửi hành động mới và các hàm getState làm đối số để chúng có thể truy cập trạng thái hiện tại và trả về một hàm. Bất kỳ giá trị trả về nào từ một hàm bên trong sẽ có sẵn dưới dạng giá trị của chính hàm điều phối.

5.2. Redux – Devtools

Redux - Devtools cung cấp một nền tảng gỡ lỗi cho các ứng dụng Redux. Nó cho phép thực hiện gỡ lỗi du hành thời gian và chỉnh sửa trực tiếp. Một số tính năng trong tài liệu chính thức như sau:

- Nó cho phép bạn kiểm tra mọi trạng thái và tải trọng hành động.

- Nó cho phép bạn quay ngược thời gian bằng các hành động “hủy bỏ”.

Nếu bạn thay đổi mã giảm thiểu, mỗi hành động “theo giai đoạn” sẽ được đánh giá lại. Nếu bộ giảm tốc ném, chúng tôi có thể xác định lỗi và cũng như trong quá trình thực hiện hành động này đã xảy ra.

Có hai biến thể của Redux devtools như được đưa ra bên dưới:

- Redux DevTools: Nó có thể được cài đặt dưới dạng một gói và được tích hợp vào ứng dụng của bạn như được cung cấp bên dưới:

- Phần mở rộng Redux DevTools: Phần mở rộng của trình duyệt triển khai các công cụ dành cho nhà phát triển tương tự cho Redux

Bạn sẽ quen với công cụ này khi bắt đầu sử dụng. Bạn có thể gửi một hành động mà không cần viết mã thực chỉ từ công cụ plugin Redux này. Tùy chọn Dispatcher ở hàng cuối cùng sẽ giúp bạn điều này. Hãy để chúng tôi kiểm tra hành động cuối cùng mà các mục được tìm nạp thành công.

5.3. Redux – React và quá trình kiểm tra mã

Kiểm tra mã Redux rất dễ dàng vì chúng chủ yếu viết các hàm và hầu hết chúng đều thuần túy. Vì vậy, chúng tôi có thể kiểm tra nó mà không cần chế nhạo họ. Ở đây, chúng tôi đang sử dụng JEST làm công cụ thử nghiệm. Nó hoạt động trong môi trường nút và không truy cập DOM.

Redux là một khuôn khổ để quản lý trạng thái cho ứng dụng web, các thành phần React hiển thị trạng thái đó. Một kho dữ liệu duy nhất chứa trạng thái cho ứng dụng của bạn. Khi ứng dụng của bạn phát ra một hành động, xác định điều gì đó vừa xảy ra sẽ ảnh hưởng đến trạng thái. Các bộ giảm thiểu chỉ định cách thay đổi trạng thái khi hành động được nhận.

- Đạo cụ cho các thành phần React đến từ cửa hàng Redux theo dõi trạng thái.

- Các thành phần React phản ứng với đầu vào của người dùng và phát ra các hành động, trực tiếp hoặc gián tiếp.

- Redux xử lý hành động bằng cách chạy các bộ giảm thích hợp để chuyển trạng thái hiện tại thành trạng thái mới.

Tìm hiểu thêm: CV react developer

- Các thành phần React phản ứng với trạng thái mới và cập nhật DOM.

- Bản thân các thành phần React là không trạng thái (hầu hết thời gian), tất cả trạng thái được giữ trong cửa hàng Redux, một nơi chúng để đơn giản hóa

Như vậy, nhắc lại một lần nữa Redux là một vùng chứa trạng thái có thể dự đoán được cho các ứng dụng JavaScript. Khi ứng dụng phát triển, thật khó để giữ cho nó có tổ chức và duy trì luồng dữ liệu. Hy vọng rằng qua bài viết này bạn đã tìm cho mình câu trả lời Redux là gì? cùng những thông tin hữu ích khác cho mình.