Bài viết này chia sẻ khái niệm và cách triển khai đơn vị Effect trong các ứng dụng giao diện người dùng trong Kiến trúc sạch.
Đơn vị Effect đóng gói logic tương tác với các tài nguyên bên ngoài thông qua các cổng. Nó quản lý các tác dụng phụ, hoạt động không đồng bộ và điều phối yêu cầu.
Các đơn vị hiệu ứng xử lý các yêu cầu qua cổng chéo, truy xuất dữ liệu, gửi quy trình và chia sẻ logic truy xuất trên nhiều trình tương tác trường hợp sử dụng.
Hiệu ứng thực hiện
Effect triển khai một giao diện do người dùng cung cấp (trình tương tác trường hợp sử dụng). Giao diện này có thể biểu diễn một chức năng theo yêu cầu của trường hợp sử dụng hoặc một chức năng phức tạp hơn, được sử dụng trên toàn ứng dụng.
Việc triển khai hiệu ứng phát triển từ dạng nội tuyến trong người tiêu dùng thành các đơn vị được trích xuất:
--------------- ------------------
| inline effect | ---> | extracted effect | --------------- ------------------
Ban đầu, các hiệu ứng được triển khai trực tuyến, tập trung vào việc tìm nạp dữ liệu, gửi yêu cầu và sắp xếp các tương tác.
Triển khai hiệu ứng nội tuyến
Hãy xem xét một trình tương tác trường hợp sử dụng khởi tạo kho thực thể khi ứng dụng khởi động, yêu cầu dữ liệu đơn hàng và người dùng:
export const useInitializeApplicationUseCase = (): { execute: () => Promise<void> } => { const usersGateway = useUsersGateway(); const ordersGateway = useOrdersGateway(); const execute = async () => { // inline effect const users = await usersGateway.getUsers(); const orders = await ordersGateway.getOrders(); setUsersAndOrdersTransaction({ users, orders }); }; return { execute };
};
Thực hiện hiệu ứng trích xuất
Việc triển khai nội tuyến có thể được trích xuất thành một đơn vị hiệu ứng có thể tái sử dụng:
// File: getUsersAndOrdersEffect.ts
export const getUsersAndOrdersEffect = async () => { const usersGateway = useUsersGateway(); const ordersGateway = useOrdersGateway(); const users = await usersGateway.getUsers(); const orders = await ordersGateway.getOrders(); return { users, orders };
}; // File: useInitializeApplicationUseCase.ts
export const useInitializeApplicationUseCase = (): { execute: () => Promise<void> } => { const execute = async () => { const { users, orders } = await getUsersAndOrdersEffect(); setUsersAndOrdersTransaction({ users, orders }); }; return { execute };
};
Các hiệu ứng được trích xuất bao gồm toàn bộ logic, cho phép sửa đổi nội bộ như yêu cầu song song mà không ảnh hưởng đến người dùng:
// File: getUsersAndOrdersEffect.ts
export const getUsersAndOrdersEffect = async () => { const usersGateway = useUsersGateway(); const ordersGateway = useOrdersGateway(); // Fetch users and orders in parallel const [users, orders] = await Promise.all([ usersGateway.getUsers(), ordersGateway.getOrders(), ]); return { users, orders };
}; // File: useInitializeApplicationUseCase.ts
export const useInitializeApplicationUseCase = (): { execute: () => Promise<void> } => { const execute = async () => { const { users, orders } = await getUsersAndOrdersEffect(); setUsersAndOrdersTransaction({ users, orders }); }; return { execute };
};
Tên hiệu ứng phải nêu rõ chức năng và kết thúc bằng hậu tố Effect.
Hỏi & Đáp
Một đơn vị Hiệu ứng nên được kiểm tra như thế nào?
Các đơn vị hiệu ứng có thể được thử nghiệm tích hợp với các đơn vị phụ thuộc của chúng hoặc riêng biệt bằng cách sử dụng bản mô phỏng.
Nên đặt Hiệu ứng ở đâu?
Các hiệu ứng nên được đặt trong một thư mục effects chuyên dụng.
Hiệu ứng có thể lồng nhau được không?
Có, Hiệu ứng có thể được lồng nhau. Tuy nhiên, việc lồng nhau có thể làm phức tạp lý luận và thử nghiệm, vì vậy hãy sử dụng cẩn thận.
Có thể sử dụng nhiều Hiệu ứng cùng lúc không?
Có, sử dụng nhiều hiệu ứng cùng lúc là phổ biến và thiết thực.
Phần kết luận
Các đơn vị hiệu ứng quản lý hiệu quả các hoạt động không đồng bộ và phối hợp các tương tác qua cổng. Bắt đầu với các triển khai nội tuyến và chỉ trích xuất các hiệu ứng khi cần, duy trì tính linh hoạt của kiến trúc khi độ phức tạp của ứng dụng tăng lên.