Redux - Chức năng thuần túy

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 túy 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 có đột biến của các biến cục bộ và 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.

Hãy để chúng tôi viết định nghĩa của hàm trong JavaScript như hình dưới đây:

const double = x => x*2; // es6 arrow function
console.log(double(2));  // 4

Here, double is a pure function.

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 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ó kiểu 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.

Hãy để chúng tôi giả sử bộ giảm giá đang thêm một mặt hàng vào giỏ hàng của bạn như được đưa ra bên dưới -

const initialState = {
   isAddedToCart: false;
}
const addToCartReducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ADD_TO_CART_SUCCESS' :
         state.isAddedToCart = !state.isAddedToCart; //original object altered
         return state;
      default:
         return state;
   }
}
export default addToCartReducer ;

Hãy giả sử, isAddedToCart là một thuộc tính trên đối tượng trạng thái cho phép bạn quyết định khi nào tắt nút 'thêm vào giỏ hàng' cho mặt hàng bằng cách trả về giá trị Boolean ‘true or false’. Điều này ngăn người dùng thêm cùng một sản phẩm nhiều lần. Bây giờ, thay vì trả về một đối tượng mới, chúng ta đang thay đổi prop isAddedToCart trên trạng thái như trên. Bây giờ nếu chúng tôi cố gắng thêm một mặt hàng vào giỏ hàng, không có gì xảy ra. Nút Thêm vào giỏ hàng sẽ không bị tắt.

Lý do cho hành vi này như sau:

Redux so sánh các đối tượng cũ và mới theo vị trí bộ nhớ của cả hai đối tượng. Nó mong đợi một đối tượng mới từ bộ giảm tốc nếu bất kỳ thay đổi nào đã xảy ra. Và nó cũng mong đợi để lấy lại đối tượng cũ nếu không có thay đổi nào xảy ra. Trong trường hợp này, nó là như nhau. Vì lý do này, Redux giả định rằng không có gì xảy ra.

Vì vậy, điều cần thiết cho một bộ giảm là một hàm thuần túy trong Redux. Sau đây là cách viết nó không bị đột biến -

const initialState = {
   isAddedToCart: false;
}
const addToCartReducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ADD_TO_CART_SUCCESS' :
         return {
            ...state,
            isAddedToCart: !state.isAddedToCart
         }
      default:
         return state;
   }
}
export default addToCartReducer;