Redux - Khái niệm cốt lõi
Hãy giả sử trạng thái ứng dụng của chúng ta được mô tả bởi một đối tượng đơn giản có tên là initialState như sau -
const initialState = {
isLoading: false,
items: [],
hasError: false
};
Mọi đoạn mã trong ứng dụng của bạn không thể thay đổi trạng thái này. Để thay đổi trạng thái, bạn cần gửi một hành động.
Hành động là gì?
Một hành động là một đối tượng đơn giản mô tả ý định gây ra thay đổi với một thuộc tính kiểu. Nó phải có thuộc tính type cho biết loại hành động nào đang được thực hiện. Lệnh cho hành động như sau:
return {
type: 'ITEMS_REQUEST', //action type
isLoading: true //payload information
}
Các hành động và trạng thái được tổ chức cùng nhau bởi một chức năng gọi là Bộ giảm tốc. Một hành động được thực hiện với ý định gây ra thay đổi. Sự thay đổi này được thực hiện bởi bộ giảm tốc. Giảm tốc là cách duy nhất để thay đổi trạng thái trong Redux, làm cho nó dễ dự đoán, tập trung và dễ gỡ lỗi hơn. Một hàm giảm thiểu xử lý hành động 'ITEMS_REQUEST' như sau:
const reducer = (state = initialState, action) => { //es6 arrow function
switch (action.type) {
case 'ITEMS_REQUEST':
return Object.assign({}, state, {
isLoading: action.isLoading
})
default:
return state;
}
}
Redux có một cửa hàng duy nhất chứa trạng thái ứng dụng. Nếu bạn muốn chia nhỏ mã của mình trên cơ sở logic xử lý dữ liệu, bạn nên bắt đầu chia nhỏ các bộ giảm của mình thay vì lưu trữ trong Redux.
Chúng ta sẽ thảo luận về cách chúng ta có thể tách bộ giảm và kết hợp nó với cửa hàng ở phần sau trong hướng dẫn này.
Các thành phần của Redux như sau: