Những người quen thuộc với phản ứng sẽ biết rằng phản ứng là một công cụ thư viện giao diện người dùng dựa trên thành phần kết nối các phân đoạn khác nhau của trang web. Trong phản ứng, chúng tôi sử dụng đạo cụ (viết tắt của thuộc tính) trong một thành phần cho phép sử dụng các biến không tĩnh. Với sự trợ giúp của các props, chúng ta có thể chuyển các biến này vào nhiều thành phần khác nhau (thành phần con) từ thành phần mẹ.
Ví dụ: Truyền đạo cụ từ thành phần mẹ sang thành phần con:
import React, { Component } from
'react'
;
class App extends Component {
render() {
const wishes =
'Welcome to My World'
;
return
(
<div>
<Greeting wishes={wishes} />
</div>
);
}
}
class Greeting extends Component {
render() {
return
<h1>Welcome to {
this
.props.wishes} world!!</h1>;
}
}
export
default
App;
Sự hiện diện của trạng thái trong phản ứng cho phép xác định các biến riêng của một thành phần. Với một vài thành phần trong ứng dụng của mình, chúng ta có thể chuyển các trạng thái này làm đạo cụ cho các thành phần con. Nhưng khi số lượng các thành phần tăng lên trong ứng dụng phù hợp với mục tiêu lớn của nó, chúng ta cần chuyển trạng thái này cho các thành phần khác nằm cách xa nhau trong cây thành phần. Tại thời điểm này, cách thông thường để chuyển trạng thái dưới dạng đạo cụ trở nên phức tạp vì không phải mọi thành phần đều là cha của thành phần yêu cầu trạng thái.
Ví dụ: Đang khởi tạo trạng thái trong một thành phần và chuyển nó dưới dạng đạo cụ cho thành phần con của nó:
class Parent extends Component{
constructor(props){
super
(props);
this
.state={
child1=0;
child2=1;
};
}
render()
{
return
(
<Child1 value={
this
.state.child1} />
<Child2 value={
this
.state.child2} />
);
}
}
Điều này dẫn đến nhu cầu về react-redux trong ứng dụng react của chúng ta. React-redux là một công cụ quản lý trạng thái giúp dễ dàng chuyển các trạng thái này từ thành phần này sang thành phần khác bất kể vị trí của chúng trong cây thành phần và do đó ngăn chặn sự phức tạp của ứng dụng.
Quy trình làm việc: Khi một ứng dụng phản ứng giữ các thành phần khác nhau cần trạng thái từ các thành phần khác, sẽ khó nhận ra trạng thái nên nằm ở đâu giữa các thành phần này để giúp việc duy trì dễ dàng hơn. React-redux cung cấp một kho lưu trữ giúp trạng thái bên trong các thành phần dễ duy trì hơn. Cùng với các cửa hàng, react-redux giới thiệu các hành động và bộ giảm hoạt động đồng thời với các cửa hàng để làm cho trạng thái dễ đoán hơn. Hoạt động của các tính năng trong react-redux được giải thích dưới đây:
- Lưu trữ: Nó chứa trạng thái của các thành phần cần được chuyển cho các thành phần khác. Cửa hàng làm cho việc truyền tải này trở nên dễ dàng hơn nhiều vì chúng ta không còn cần phải duy trì trạng thái bên trong một thành phần mẹ để chuyển cùng một trạng thái cho các thành phần con của nó.
- Các hành động : Phần hành động
của react-redux về cơ bản chứa các hành động khác nhau sẽ được thực
hiện trên trạng thái có trong cửa hàng. Các hành động được bao gồm phải
chứa loại hành động và cũng có thể chứa tải trọng (trường dữ liệu trong
các hành động) .
Ví dụ: Các hành động tăng và giảm trong ứng dụng phản ứng:
export const increment = (num) => {
return
{
type:
'INCREMENT'
,
payload: num
};
};
export const decrement = () => {
return
{
type:
'DECREMENT'
,
};
};
Bộ giảm : Các bộ giảm trong react-redux là các hàm thuần túy chứa các hoạt động cần được thực hiện trên trạng thái. Các hàm này chấp nhận trạng thái ban đầu của trạng thái đang được sử dụng và kiểu hành động. Nó cập nhật trạng thái và phản hồi với trạng thái mới. Trạng thái cập nhật này được gửi trở lại các thành phần xem của phản ứng để thực hiện các thay đổi cần thiết. Một bộ giảm tốc phải chứa loại hành động.
Ví dụ: Bộ giảm tốc cập nhật trạng thái phù hợp với chương trình loại hành động thứ nhất và chương trình thứ 2 hiển thị đoạn mã tạo cửa hàng chấp nhận bộ giảm tốc.
Chương trình: 1
const counterReducer = (state=0, action) => {
switch
(action.type)
{
case
'INCREMENT'
:
return
state + action.payload;
case
'DECREMENT'
:
return
state - 1;
default
:
return
state;
}
};
Chương trình: 2
import {createStore} from
'react-redux'
;
const store = createStore(
counterReducer,
window.__REDUX__DEVTOOLS__EXTENSIONS__ &&
window.__REDUX__DEVTOOLS__EXTENSION__()
);
React-Redux cần thiết cho: Như đã trình bày ở trên, rõ ràng là việc sử dụng react-redux giới thiệu rất nhiều mã soạn sẵn trong ứng dụng của chúng ta chỉ với mục đích chuyển trạng thái từ thành phần này sang thành phần khác. Điều này có thể khiến nhiều người mới học react-redux rút lại sự quan tâm của họ từ những thứ tương tự. Bất kể thực tế này, nhiều nhà phát triển thích react-redux trong ứng dụng của họ vì những lý do sau:
- Giảm độ phức tạp của mã: Như đã thảo luận trước đó, khi một ứng dụng chứa một số lượng lớn các thành phần tương tác với nhau thông qua trạng thái của chúng, sẽ khó quản lý việc chuyển trạng thái của một thành phần làm đạo cụ cho một thành phần khác nằm ở xa trong cây thành phần. React-redux với sự ra đời của cửa hàng lưu giữ trạng thái của các thành phần của ứng dụng và do đó làm cho mã đơn giản hơn vì nó loại bỏ sự nhầm lẫn về nơi mà trạng thái đáng lẽ phải cư trú.
- Khả năng bảo trì dễ dàng hơn: Với sự trợ giúp của cửa hàng, trạng thái hiện được đặt tại một vị trí trong ứng dụng, điều này giúp dễ dàng duy trì hơn bất cứ khi nào cập nhật trạng thái diễn ra trong các thành phần khác nhau.
- Giảm thời gian: React-redux làm mới các phần của trang thay vì tải lại toàn bộ trang và do đó tiết kiệm thời gian cho chúng tôi.
- Gỡ lỗi dễ dàng: React-redux giới thiệu các bộ giảm thiểu là các hàm thuần túy hoạt động trên trạng thái làm cho logic đơn giản hơn và giúp gỡ lỗi dễ dàng.
Cài đặt: Để cài đặt react-redux trong ứng dụng react của bạn, hãy chạy lệnh dưới đây trong terminal:
npm cài đặt react-redux
