Reducer

Là một hàm có hai đối số: state và action. Giá trị trả về của hàm này là một state mới. Mô tả ngắn gọn như sau:

reducer = (state, action) => newState

Có thể xem reducer giống như event listener (xem thêm JS Event).

Rules of Reducer

Reducer cần tuân thủ các quy tắc sau:

• Chỉ tính toán state mới dựa trên state và action truyền vào.
• Không được mutate state hiện tại (tính immutability).
• Không thực hiện các tác vụ bất đồng bộ hoặc tính toán các giá trị ngẫu nhiên.

Mục tiêu chính của Redux là làm code trở nên có thể dự đoán được. Khi giá trị đầu ra được tính toán dựa trên giá trị đầu vào, output sẽ có thể dự đoán một cách dễ dàng. Điều này làm cho code dễ hiểu và dễ test hơn

Nếu reducer phụ thuộc vào các biến bên ngoài, output của nó sẽ trở nên bất định, dẫn đến việc chúng ta sẽ không kiểm soát được luồng thực thi của chương trình.

Seealso

Xem thêm Keeping Components Pure.

The Logic Inside Reducer

Khi có một sự kiện xảy ra, reducer sẽ kiểm tra xem nó có lắng nghe sự kiện đó hay không.

• Nếu có, tạo ra một bản sao của state, đồng thời cập nhật giá trị cho bản sao này và trả về bản sao như là một state mới.
• Nếu không, trả về state hiện tại.

Ví dụ minh họa:

const initialState = { count: 0 }
 
function counterReducer(state = initialState, action) {
	switch (action.type) {
		case "counter/increment":
			return {
				...state,
				count: state.count + action.payload,
			}
		case "counter/decrement":
			return {
				...state,
				count: state.count - action.payload,
			}
		default:
			return state
	}
}

Why Are They Called ‘Reducers?‘

Cái tên “reducer” có ý nghĩa tương tự với phương thức reduce của mảng (xem thêm Higher Order Array Methods).

Nhóm phát triển thư viện sử dụng tên này là vì giữa reducer và reduce có một số điểm tương đồng nhất định:

• Đều trả về một giá trị từ một hoặc nhiều giá trị.
• Đều tính toán giá trị mới dựa trên kết quả trước đó và giá trị hiện tại.

Related

list
from [[Redux Reducer]]
sort file.ctime asc

Resources

• Redux Reducer