Hướng dẫn what is reducer in javascript? - Giảm thiểu trong javascript là gì?

Đối với hầu hết các ứng dụng JavaScript, bộ giảm tốc là một khái niệm thiết yếu giúp chúng tôi quản lý trạng thái ứng dụng.

Nó được sử dụng trong hầu hết mọi thư viện JavaScript hoặc khung, React, Angular và Vue, đặc biệt là trong Thư viện quản lý nhà nước Redux và Ngrx. Điều quan trọng là phải hiểu để nắm bắt việc quản lý trạng thái trong các ứng dụng quy mô trung bình đến lớn.

Bộ giảm thiểu là gì?

Một bộ giảm tốc là một ý tưởng rất đơn giản và nó có một thứ gì đó dễ dàng để bạn nắm bắt bởi vì, tóm lại, nó chỉ là một chức năng JS đơn giản.

Bộ giảm tốc là một hàm có hai đối số - trạng thái hiện tại và một hành động - và trả về dựa trên cả hai đối số một trạng thái mới.

Chúng ta có thể thể hiện ý tưởng trong một dòng, như một hàm gần như hợp lệ:

const reducer = [state, action] => newState;

Nhập chế độ FullScreenen EXIT Mode FullScreen

Hãy để một ví dụ rất đơn giản, trong đó chúng ta cần quản lý một số dữ liệu, nói rằng ứng dụng của chúng ta có acune, nơi chúng ta có thể tăng hoặc giảm một số bằng 1. Vì vậy, hãy để lấy bộ giảm tốc của chúng ta và gọi nó là

function counterReducer[state, action] {
  return state + 1;
}

8. Chức năng này sẽ được thực thi để cập nhật trạng thái bất cứ khi nào người dùng muốn đếm ngược hoặc xuống. Kết quả là cơ thể chức năng, chúng tôi chỉ muốn trả về trạng thái + 1:

function counterReducer[state, action] {
  return state + 1;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

function counterReducer[state, action] {
  return state + 1;
}

Vì vậy, bây giờ sự gia tăng của chúng tôi chỉ bằng 1 mỗi lần.

function counterReducer[count, action] {
  return count + 1;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

function counterReducer[state, action] {
  return state + 1;
}

counterReducer[0] === 1; // true

Nhập chế độ FullScreenen EXIT Mode FullScreen

function counterReducer[state, action] {
  return state + 1;
}

Vì vậy, bây giờ sự gia tăng của chúng tôi chỉ bằng 1 mỗi lần.

Nếu điều này có vẻ khó hiểu, chúng ta có thể đổi tên

function counterReducer[state, action] {
  return state + 1;
}

9 thành

function counterReducer[count, action] {
  return count + 1;
}

Hãy nói rằng trạng thái ban đầu là 0, sau khi chạy điều này, chúng tôi hy vọng kết quả là 1. Và đó là:

Điều gì đặc biệt về điều này và tại sao chúng ta muốn sử dụng nó?

Trước hết, giảm giá là đặc biệt vì chúng có thể dự đoán được. Nói cách khác, chúng là ví dụ trong thế giới thực về các hàm thuần túy, đưa ra một đầu vào nhất định, chúng ta sẽ luôn có cùng một đầu ra mà không có tác dụng phụ [một tương tác với một cái gì đó bên ngoài ứng dụng của chúng ta có thể thay đổi trạng thái của chúng ta, chẳng hạn như API] trên đường đi. Điều này là lý tưởng để làm một cái gì đó mà chúng ta cần phải có các giá trị đáng tin cậy như như quản lý trạng thái.

{ type: ‘INCREMENT’ }; // action to increment counter

Nhập chế độ FullScreenen EXIT Mode FullScreen

function counterReducer[state, action] {
  return state + 1;
}

Vì vậy, bây giờ sự gia tăng của chúng tôi chỉ bằng 1 mỗi lần.

{ type: ‘DECREMENT’ } // action to decrement counter

Nhập chế độ FullScreenen EXIT Mode FullScreen

function counterReducer[state, action] {
  return state + 1;
}

Vì vậy, bây giờ sự gia tăng của chúng tôi chỉ bằng 1 mỗi lần.

Nếu điều này có vẻ khó hiểu, chúng ta có thể đổi tên

function counterReducer[state, action] {
  return state + 1;
}

9 thành

function counterReducer[count, action] {
  return count + 1;
}

function counterReducer[count, action] {
  switch [action.type] {
    case "INCREMENT":
      return count + 1;
    case "DECREMENT":
      return count - 1;
    default:
      return count;
  }
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

function counterReducer[state, action] {
  return state + 1;
}

Vì vậy, bây giờ sự gia tăng của chúng tôi chỉ bằng 1 mỗi lần.

Nếu điều này có vẻ khó hiểu, chúng ta có thể đổi tên

function counterReducer[state, action] {
  return state + 1;
}

9 thành

function counterReducer[count, action] {
  return count + 1;
}

counterReducer[0, { type: ‘INCREMENT’ }] // 1

Nhập chế độ FullScreenen EXIT Mode FullScreen

function counterReducer[state, action] {
  return state + 1;
}

counterReducer[1, { type: ‘DECREMENT’ }] // 0

Nhập chế độ FullScreenen EXIT Mode FullScreen

function counterReducer[state, action] {
  return state + 1;
}

Vì vậy, bây giờ sự gia tăng của chúng tôi chỉ bằng 1 mỗi lần.

Nếu điều này có vẻ khó hiểu, chúng ta có thể đổi tên

function counterReducer[state, action] {
  return state + 1;
}

9 thành

function counterReducer[count, action] {
  return count + 1;
}

Hãy nói rằng trạng thái ban đầu là 0, sau khi chạy điều này, chúng tôi hy vọng kết quả là 1. Và đó là:

Đầu tiên, hãy để thay đổi

function counterReducer[count, action] {
  return count + 1;
}

0 thành

function counterReducer[state, action] {
  return state + 1;
}

9. Và

function counterReducer[count, action] {
  return count + 1;
}

0 hiện chỉ là một tài sản trên

function counterReducer[state, action] {
  return state + 1;
}

function counterReducer[state, action] {
  switch [action.type] {
    case "INCREASE":
      return { count: state.count + 1 };
    case "DECREMENT":
      return { count: state.count - 1 };
    default:
      return state;
  }
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Bây giờ ở đây chúng tôi chỉ đang cập nhật thuộc tính

function counterReducer[count, action] {
  return count + 1;
}

0, nhưng nói rằng nếu chúng tôi có các thuộc tính khác, chúng tôi cũng muốn hợp nhất chúng thành một đối tượng duy nhất với trạng thái đếm. Chúng tôi có thể dễ dàng làm điều đó với toán tử lây lan như vậy:

function counterReducer[state, action] {
  return state + 1;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Bây giờ ở đây chúng tôi chỉ đang cập nhật thuộc tính

function counterReducer[count, action] {
  return count + 1;
}

Đây là một phần thiết yếu của việc sử dụng các bộ giảm thiểu trong việc quản lý trạng thái ứng dụng. Nhà nước được quản lý phần lớn thông qua các đối tượng và cập nhật nhà nước phải luôn luôn là bất biến. Chúng tôi tạo một đối tượng trạng thái mới từ trạng thái đến và phần chúng tôi muốn thay đổi [ví dụ: thuộc tính

function counterReducer[count, action] {
  return count + 1;
}

0]. Bằng cách này, chúng tôi đảm bảo rằng các thuộc tính khác mà aren chạm vào từ đối tượng trạng thái đến vẫn được giữ nguyên cho đối tượng trạng thái mới. Vì vậy, mô hình lan truyền này ở trạng thái cũ và cập nhật một phần trạng thái duy nhất mà bộ giảm tốc điều khiển để tạo ra một đối tượng mới sẽ trở thành một mẫu rất quen thuộc

function counterReducer[state, action] {
  return state + 1;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Bây giờ ở đây chúng tôi chỉ đang cập nhật thuộc tính

function counterReducer[count, action] {
  return count + 1;
}

function counterReducer[count, action] {
  return count + 1;
}

Hãy để một bộ giảm tốc mới kiểm soát tên và email của người dùng hiện tại. Bởi vì nó sẽ quản lý trạng thái người dùng, chúng tôi sẽ gọi đây là bộ giảm thiểu người dùng và có trạng thái và hành động dưới dạng tham số. Chúng tôi sẽ tạo ra hai trường hợp, một trường hợp để thay đổi tên của họ và một trường hợp khác để thay đổi email.

Tải trọng

function counterReducer[state, action] {
  return state + 1;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Bây giờ ở đây chúng tôi chỉ đang cập nhật thuộc tính

function counterReducer[count, action] {
  return count + 1;
}

function counterReducer[state, action] {
  return state + 1;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

function counterReducer[count, action] {
  return count + 1;
}

function counterReducer[state, action] {
  return state + 1;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

function counterReducer[state, action] {
  return state + 1;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tải trọng

function counterReducer[state, action] {
  return state + 1;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Tại thời điểm này, chúng tôi đã chạm vào cách sử dụng các loại để chạy một hoặc điều kiện khác, nhưng ở đây chúng tôi cần chuyển thêm thông tin cho bộ giảm tốc của chúng tôi để cập nhật trạng thái phù hợp. Hãy nói rằng người dùng cập nhật tên của họ thông qua hai đầu vào. Làm thế nào để chúng tôi nhận được các giá trị mà họ đã nhập vào?

function counterReducer[state, action] {
  return state + 1;
}

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chúng tôi vẫn nhận được nó thông qua hành động, nhưng thông qua một thuộc tính khác được gọi là tải trọng. Trên tài sản này, chúng tôi có thể chấp nhận bất kỳ dữ liệu nào chúng tôi thích. Hãy để viết nó cho điều kiện Change_name khi người dùng thay đổi tên của họ.

Chúng tôi có thể đặt tải trọng cho bất cứ điều gì người dùng gõ, nhưng một cách tốt hơn để xử lý điều này là biến tải trọng thành một đối tượng. Điều này là để chúng ta có thể chuyển nhiều giá trị trên tải trọng và mỗi giá trị này sẽ rất rõ ràng về những gì chúng là. Ví dụ: chúng ta có thể đặt cho đối tượng tên thuộc tính khi chạy tên thay đổi

Sau đó, quay lại trong công tắc của chúng tôi, để cập nhật trạng thái, chúng tôi có thể quay lại và phản đối nơi chúng tôi lan truyền trong tất cả các thuộc tính trạng thái khác mà chúng tôi không cập nhật cho đối tượng trạng thái mới. Và sau đó để có được tải trọng để cập nhật tên, hãy để nói rằng

function counterReducer[count, action] {
  return count + 1;
}

7 bao gồm một thuộc tính tên và email:

Chúng tôi chỉ có thể đặt thuộc tính tên thành
```
function counterReducer[count, action] {
  return count + 1;
}
```
8. Nó đơn giản mà. Vì nó là một giá trị nguyên thủy, không phải là một giá trị tham chiếu mà chúng tôi không cần phải lo lắng về việc sao chép ở đây:
Và chúng ta có thể làm tương tự cho email. Hãy để viết hành động trước:
Và sau đó điều kiện, đảm bảo cung cấp trường hợp mặc định của chúng tôi ở cuối. Và lưu ý rằng nó không có trường hợp từ khóa phía trước nó, chỉ là mặc định:
Bây giờ, hãy để thực hiện các bản cập nhật trạng thái này, vượt qua trong InitialState:

Bản tóm tắt

Bạn sẽ trở nên tự tin hơn với các bộ giảm thiểu khi bạn sử dụng chúng trong các ứng dụng của riêng bạn. Chúng nên là một khái niệm đơn giản hóa mã của chúng tôi bằng cách giúp chúng tôi làm cho các bản cập nhật trạng thái của chúng tôi dễ dự đoán hơn. takes everything you should know about learning React and bundles it into one comprehensive package, including videos, cheatsheets, plus special bonuses.

Dưới đây là những điều thiết yếu bạn nên biết về một bộ giảm tốc trong tương lai:

Cú pháp: Về bản chất, hàm giảm thiểu được biểu thị dưới dạng [trạng thái, hành động] => newState.

Phương pháp giảm thiểu là gì?

Phương thức giảm [] thực thi chức năng gọi lại "giảm" do người dùng cung cấp trên mỗi phần tử của mảng, theo thứ tự, chuyển giá trị trả về từ tính toán trên phần tử trước.Kết quả cuối cùng của việc chạy bộ giảm tốc trên tất cả các phần tử của mảng là một giá trị duy nhất.executes a user-supplied "reducer" callback function on each element of the array, in order, passing in the return value from the calculation on the preceding element. The final result of running the reducer across all elements of the array is a single value.

Bộ giảm thiểu trong React JS là gì?

Chức năng giảm.Bộ giảm tốc là một hàm thuần túy chấp nhận 2 tham số: trạng thái hiện tại và đối tượng hành động.Tùy thuộc vào đối tượng hành động, hàm giảm thiểu phải cập nhật trạng thái theo cách bất biến và trả về trạng thái mới.a pure function that accepts 2 parameters: the current state and an action object. Depending on the action object, the reducer function must update the state in an immutable manner, and return the new state.

Tại sao nó được gọi là một bộ giảm thiểu?

Lý do tại sao bộ giảm thiểu Redux được gọi là bộ giảm thiểu là vì bạn có thể "giảm" một tập hợp các hành động và trạng thái ban đầu [của cửa hàng] để thực hiện các hành động này để có được trạng thái cuối cùng.because you could "reduce" a collection of actions and an initial state [of the store] on which to perform these actions to get the resulting final state .

Có phải giảm và redux giống nhau?

Bộ giảm tốc là một hàm thuần túy xác định các thay đổi đối với trạng thái của ứng dụng.Giảm giá là một trong những khối xây dựng của Redux.Reducer is one of the building blocks of Redux.

Bộ giảm thiểu là gì?

Nếu điều này có vẻ khó hiểu, chúng ta có thể đổi tên function counterReducer[state, action] { return state + 1; } 9 thành function counterReducer[count, action] { return count + 1; } 0:

Vì vậy, bây giờ sự gia tăng của chúng tôi chỉ bằng 1 mỗi lần.

Bản tóm tắt

Phương pháp giảm thiểu là gì?

Bộ giảm thiểu trong React JS là gì?

Tại sao nó được gọi là một bộ giảm thiểu?

Có phải giảm và redux giống nhau?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề

Nếu điều này có vẻ khó hiểu, chúng ta có thể đổi tên
`function counterReducer[state, action] { return state + 1; }`
9 thành
`function counterReducer[count, action] { return count + 1; }`
0: