Phản ứng và Redux
cả hai đều cần các chức năng thuần túy kết hợp với tính bất biến để chạy theo kiểu có thể dự đoán được.
Nếu bạn không làm theo hai điều này, ứng dụng của bạn sẽ có lỗi, phổ biến nhất là React/Redux
không thể theo dõi các thay đổi và không thể kết xuất lại khi state/prop
thay đổi của bạn .
Về mặt React, hãy xem xét ví dụ sau:
let state = {
add: 0,
}
function render() {
//...
}
//pure function
function effects(state,action) {
//following immutability while updating state, not directly mutating the state.
if(action == 'addTen') {
return {...state, add: state.add + 10}
}
return state;
}
function shouldUpdate(s) {
if(s === state){
return false
}
return true
}
state = effects(state, 'addTen')if(shouldUpdate(state)) {
render();
}
Nhà nước được tổ chức bởi các đối tượng nhà nước chỉ có tài sản thêm. Ứng dụng này làm cho tài sản ứng dụng. Không nên luôn luôn hiển thị trạng thái khi có bất cứ điều gì xảy ra nhưng nên kiểm tra xem có thay đổi xảy ra trong đối tượng trạng thái hay không.
Giống như vậy, chúng ta có một hàm hiệu ứng, pure function
mà chúng ta sử dụng để ảnh hưởng đến trạng thái của chúng ta. Bạn thấy rằng nó trả về trạng thái mới khi trạng thái được thay đổi và trả về trạng thái tương tự khi không cần sửa đổi.
Chúng ta cũng có một shouldUpdate
hàm kiểm tra bằng toán tử === xem trạng thái cũ và trạng thái mới có giống nhau không.
Để mắc lỗi về mặt React, bạn thực sự có thể làm như sau:
function effects(state,action) {
doRandom(); // effects should only be called for updating state.
// Doing any other stuff here would make effects impure.
if(action == 'addTen') {
return {...state, add: state.add + 10}
}
return state;
}
Bạn cũng có thể mắc lỗi bằng cách đặt trạng thái trực tiếp và không sử dụng effects
chức năng.
function doMistake(newValue) {
this.state = newValue
}
Ở trên không nên được thực hiện và chỉ effects
nên sử dụng chức năng để cập nhật trạng thái.
Về mặt React, chúng tôi gọi effects
là setState
.
Đối với Redux:
combineReducers
Tiện ích của Redux kiểm tra các thay đổi tham chiếu.
connect
Phương thức của React-Redux tạo ra các thành phần kiểm tra các thay đổi tham chiếu cho cả trạng thái gốc và giá trị trả về từ các mapState
hàm để xem thành phần được bao bọc có thực sự cần phải kết xuất lại hay không.
- Gỡ lỗi du hành thời gian đòi hỏi bộ giảm tốc
pure functions
không có tác dụng phụ để bạn có thể nhảy chính xác giữa các trạng thái khác nhau.
Bạn có thể dễ dàng vi phạm ba điều trên bằng cách sử dụng các hàm không tinh khiết làm bộ giảm tốc.
Sau đây được lấy trực tiếp từ các tài liệu redux:
Nó được gọi là bộ giảm tốc vì đây là loại chức năng bạn sẽ chuyển qua Array.prototype.reduce(reducer, ?initialValue)
.
Điều rất quan trọng là bộ giảm tốc vẫn nguyên chất. Những điều bạn không bao giờ nên làm trong bộ giảm tốc:
Mutate its arguments;
Perform side effects like API calls and routing transitions;
Call non-pure functions, e.g. Date.now() or Math.random().
Đưa ra các đối số tương tự, nó sẽ tính toán trạng thái tiếp theo và trả về nó. Không ngạc nhiên. Không có tác dụng phụ. Không có lệnh gọi API. Không có đột biến. Chỉ là một phép tính.
window.getElementById
vv để chạy cùng một chức năng với cùng một tham số có thể có kết quả khác nhau tùy thuộc vào các tác dụng phụ. Đó là nơi mà redux sẽ thất bại.