Trong dự án gọi xe trực tuyến, chức năng lấy đơn hàng là một phần rất quan trọng. Nó quyết định liệu tài xế có thể đáp ứng kịp thời yêu cầu của hành khách hay không và cải thiện hiệu quả hoạt động của toàn bộ nền tảng. Bài viết này sẽ giới thiệu chi tiết cách sử dụng Java để triển khai chức năng lấy đơn hàng của dự án gọi xe trực tuyến, đồng thời đưa ra ví dụ code hoàn chỉnh để bạn đọc có thể chạy và tham khảo trực tiếp.

1. Phân tích bối cảnh và nhu cầu của dự án

1.Dự án nền tảng

Với sự phát triển nhanh chóng của Internet di động, dịch vụ gọi xe trực tuyến đã trở thành một lựa chọn quan trọng cho việc đi lại hàng ngày của mọi người. Một nền tảng gọi xe trực tuyến hiệu quả, ngoài việc cung cấp chức năng đăng ký, đăng nhập, đặt hàng và các chức năng khác tốt cho người dùng, còn cần đảm bảo rằng tài xế có thể nhanh chóng phản hồi các yêu cầu của hành khách, tức là thực hiện chức năng lấy đơn hàng.

2.phân tích nhu cầu

• Khách hàng: Hành khách có thể đặt hàng và kiểm tra trạng thái đơn hàng (chẳng hạn như đơn hàng đang chờ xử lý, đơn hàng đã thực hiện, đã hoàn thành, v.v.).
• Tài xế: Người lái xe có thể xem các đơn hàng hiện tại ở gần và chọn lấy chúng. Sau khi lấy lệnh thành công, tài xế cần đón khách tại địa điểm do hành khách chỉ định.
• Quản lý phụ trợ: Quản trị viên có thể xem trạng thái của tất cả các đơn đặt hàng và tài xế cũng như thực hiện việc lập kế hoạch và quản lý cần thiết.

2. Lựa chọn công nghệ và thiết kế kiến trúc

1.Lựa chọn công nghệ

• phía sau: Java (Khung công tác khởi động mùa xuân)
• cơ sở dữ liệu:MySQL
• bộ nhớ đệm: Redis (được sử dụng để triển khai các khóa phân tán và đảm bảo tính nguyên tử của các hoạt động lấy đơn hàng)
• giao diện người dùng:Vue.js (giao diện hành khách và tài xế)
• Giao thức truyền thông: HTTP/HTTPS (sử dụng API RESTful cho giao tiếp front-end và back-end)

2.thiết kế kiến trúc

• Khách hàng: Chịu trách nhiệm tiếp nhận thông tin đầu vào từ hành khách và gửi thông tin đặt hàng đến máy chủ phụ trợ.
• Tài xế: Hiển thị danh sách các đơn hàng lân cận, cung cấp chức năng lấy đơn hàng và gửi yêu cầu lấy đơn hàng đến máy chủ phụ trợ.
• máy chủ phụ trợ: Xử lý các yêu cầu từ hành khách và tài xế, lưu trữ thông tin đơn hàng, quản lý trạng thái tài xế và thực hiện logic lấy đơn hàng.
• cơ sở dữ liệu: Lưu trữ hành khách, tài xế, đơn hàng và các thông tin khác.
• Làm lại: Được sử dụng để triển khai các khóa phân tán nhằm đảm bảo rằng chỉ một tài xế có thể nhận đơn hàng thành công trong các điều kiện đồng thời.

3. Thiết kế cơ sở dữ liệu

1.Hành khách

Tên trường	kiểu	Nhận xét
NHẬN DẠNG	INT	Khóa chính, tự động tăng
tên	VARCHAR	Tên hành khách
điện thoại	VARCHAR	Số điện thoại di động của hành khách
mật khẩu	VARCHAR	Mã hành khách
Địa chỉ	VARCHAR	Địa chỉ hành khách

2.Bảng điều khiển (trình điều khiển)

Tên trường	kiểu	Nhận xét
NHẬN DẠNG	INT	Khóa chính, tự động tăng
tên	VARCHAR	tên tài xế
điện thoại	VARCHAR	Số điện thoại di động của tài xế
mật khẩu	VARCHAR	Mật khẩu trình điều khiển
trạng thái	INT	Trạng thái trình điều khiển (0: không hoạt động, 1: đã đặt hàng)

3.Bảng đặt hàng (đặt hàng)

Tên trường	kiểu	Nhận xét
NHẬN DẠNG	INT	Khóa chính, tự động tăng
hành khách_id	INT	ID hành khách
địa chỉ bắt đầu	VARCHAR	địa chỉ bắt đầu
địa chỉ cuối	VARCHAR	địa chỉ đích
trạng thái	INT	Trạng thái đơn hàng (0: đang chờ đơn hàng, 1: đã đặt hàng, 2: đã hoàn thành)
driver_id	INT	ID trình điều khiển lấy đơn hàng (trống có nghĩa là đơn hàng đang chờ lấy)

4. Triển khai phụ trợ

1.Tạo dự án Spring Boot

Sử dụng Spring Khởi tạo để tạo dự án Spring Boot và chọn các phụ thuộc cần thiết (chẳng hạn như Spring Web, Spring Data JPA, MySQL Driver, v.v.).

2.Cấu hình kết nối cơ sở dữ liệu

Định cấu hình thông tin kết nối cơ sở dữ liệu trong tệp application.properties:

spring.datasource.url=jdbc:mysql://localhost:3306/ride_sharing?useSSL=false&serverTimezone=UTC spring.datasource.username=root spring.datasource.password=root spring.jpa.hibernate.ddl-auto=update mùa xuân. jpa.show-sql=true

3.Tạo lớp thực thể

// Passenger.java @Entity public class Passenger { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) riêng tư ID dài; Tên chuỗi riêng tư; Mật khẩu chuỗi riêng tư; Driver.java @Entity lớp công khai Trình điều khiển { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) riêng tư ID dài riêng tư Chuỗi điện thoại riêng tư; 0; // 0: Miễn phí, 1: Đã đặt hàng // Getters và Setters } // Order.java @Entity public class Order { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) riêng tư Long id hành kháchId; startAddress; riêng tư Chuỗi endAddress; trạng thái số nguyên riêng tư = 0; // 0: Đang chờ đơn hàng, 1: Đã đặt hàng, 2: Đã hoàn thành Long driverId; Trống có nghĩa là đơn hàng đang chờ được lấy // Getters and Setters }

4.Tạo giao diện Kho lưu trữ

// Giao diện công khai PassengerRepository.java PassengerRepository mở rộng JpaRepository {} // DriverRepository.java giao diện công khai DriverRepository mở rộng JpaRepository {} // OrderRepository.java giao diện công khai OrderRepository mở rộng JpaRepository { }

5.Triển khai logic lấy đơn hàng

Để đạt được tính nguyên tử của chức năng lấy đơn hàng, chúng ta cần sử dụng Redis để triển khai các khóa phân tán. Sau đây là lớp Dịch vụ triển khai logic lấy đơn hàng:

nhập org.springframework.beans.factory.annotation.Autowired; nhập org.springframework.data.redis.core.StringRedisTemplate; nhập org.springframework.stereotype.Service; nhập org.springframework.transaction.annotation.Transactional; .List; nhập java.util.Optional; nhập lớp công khai java.util.concurrent.TimeUnit; OrderService { @Autowired Private OrderRepository orderRepository; @Autowired Private DriverRepository driverRepository; @Autowired Private StringRedisTemplate redisTemplate; Chuỗi tĩnh cuối cùng riêng tư LOCK_KEY = "order_lock:"; Chuỗi GrabOrder(Long driverId, Long orderId) { // Sử dụng Redis để triển khai các khóa phân tán Chuỗi lockKey = LOCK_KEY + orderId; khóa Boolean = redisTemplate.opsForValue().setIfAbsent(lockKey, "1", LOCK_EXPIRE_TIME, TimeUnit.SECONDS); "Không lấy được đơn hàng, đơn hàng đã bị tài xế khác lấy" } try { // Truy vấn thông tin đơn hàng Tùy chọn; tùy chọnOrder = orderRepository.findById(orderId); if (!OptionalOrder.isPresent()) { return "Đơn hàng không tồn tại"; } Thứ tự đặt hàng = tùy chọnOrder.get(); return " Lấy đơn hàng không thành công, trạng thái đơn hàng không bình thường" } // Cập nhật trạng thái đơn hàng và ID trình điều khiển order.setStatus(1); orderRepository.save(order); // Cập nhật trạng thái trình điều khiển Tùy chọn tùy chọnDriver = driverRepository.findById(driverId); driverRepository.save(driver); } return "Đặt hàng thành công" } cuối cùng { // Mở khóa redisTemplate.delete(lockKey); } } public List getNearbyOrders(Double vĩ độ, Double longitude) { // Truy vấn các đơn hàng lân cận dựa trên kinh độ và vĩ độ (quy trình được đơn giản hóa ở đây và chỉ trả về tất cả các đơn hàng đang chờ xử lý) trả lại orderRepository.findAllByStatus (0); } }

6.Tạo lớp điều khiển

Hoàn thành phương thức getNearbyOrders của lớp OrderController và đảm bảo rằng logic của nó khớp với hàm lấy đơn hàng. Ngoài ra, để gần hơn với nhu cầu thực tế, phương thức getNearbyOrders sẽ có thể lọc các đơn hàng lân cận dựa trên vị trí của người lái xe (vĩ độ và kinh độ), mặc dù trong các ứng dụng thực tế, điều này thường liên quan đến các truy vấn không gian địa lý phức tạp hơn. Nhưng trong ví dụ này, để đơn giản hóa, chúng tôi sẽ chỉ trả về tất cả các lệnh đang chờ xử lý và cho biết trong phần nhận xét cách triển khai logic phức tạp hơn.

nhập org.springframework.beans.factory.annotation.Autowired; nhập org.springframework.web.bind.annotation.*; nhập @RestController @RequestMapping("/api/orders") lớp công khai OrderController { @ OrderService orderService riêng tư được tự động nối dây; @PostMapping("/grab") chuỗi công khai GrabOrder(@RequestParam Long driverId, @RequestParam Long orderId) { return orderService.grabOrder(driverId, orderId); } @GetMapping("/nearby") public List getNearbyOrders(@RequestParam Vĩ độ kép, @RequestParam Kinh độ kép) { // Trong ứng dụng thực tế , phần này phải chứa logic truy vấn dựa trên vị trí địa lý, // chẳng hạn như sử dụng chỉ mục không gian địa lý trong cơ sở dữ liệu hoặc dịch vụ tìm kiếm không gian địa lý của bên thứ ba. // Nhưng để đơn giản hóa ví dụ, chúng ta chỉ trả về tất cả các đơn hàng cần lấy. // Lưu ý: Trong môi trường sản xuất, trả lại trực tiếp tất cả các đơn đặt hàng đang chờ xử lý có thể không phải là cách tốt nhất, // vì điều này có thể tiết lộ quá nhiều thông tin cho trình điều khiển và tăng tải cho máy chủ phụ trợ. // Giả sử chúng ta có một phương pháp tính bán kính của các đơn hàng lân cận dựa trên vị trí của người lái xe (ví dụ: 5 km) // Nhưng vì chúng ta đã đơn giản hóa truy vấn không gian địa lý nên phương pháp này không được triển khai ở đây. //Trả về danh sách đơn hàng đã lọc, chỉ bao gồm các đơn hàng có trạng thái "cần lấy" // Trong các ứng dụng thực tế, cần có một truy vấn phức tạp hơn ở đây, dựa trên vị trí của người lái xe và vị trí của đơn hàng trả về orderService.getNearbyOrders( 0); // 0 cho biết trạng thái chờ đơn hàng // Lưu ý: Trong lệnh gọi trên, chúng ta đã chuyển mã trạng thái 0 làm tham số, nhưng trong phương thức getNearbyOrders của OrderService // Trên thực tế, chúng tôi không sử dụng tham số này để lọc (vì ví dụ của chúng tôi đơn giản hóa các truy vấn không gian địa lý). // Trong quá trình triển khai OrderService thực tế, bạn nên sửa đổi phương thức này để chấp nhận mã trạng thái làm tham số và lọc thứ tự tương ứng. // Ví dụ: return orderRepository.findAllByStatusAndWithinRadius(0, vĩ độ, kinh độ, bán kính); // Phương thức InsideRadius ở đây là một phương thức giả định được sử dụng để thực hiện các truy vấn không gian địa lý. } }

Hoàn thành phương thức getNearbyOrders của lớp OrderController và đảm bảo rằng logic của nó khớp với hàm lấy đơn hàng. Ngoài ra, để gần hơn với nhu cầu thực tế, phương thức getNearbyOrders sẽ có thể lọc các đơn hàng lân cận dựa trên vị trí của người lái xe (vĩ độ và kinh độ), mặc dù trong các ứng dụng thực tế, điều này thường liên quan đến các truy vấn không gian địa lý phức tạp hơn. Nhưng trong ví dụ này, để đơn giản hóa, chúng tôi sẽ chỉ trả về tất cả các lệnh đang chờ xử lý và cho biết trong phần nhận xét cách triển khai logic phức tạp hơn.

7. Cấu hình bảo mật (như Spring Security)

Để đảm bảo tính bảo mật của hệ thống, thông thường cần phải định cấu hình xác thực và ủy quyền người dùng.

Lớp cấu hình:

nhập org.springframework.context.annotation.Bean; nhập org.springframework.context.annotation.Configuration; nhập org.springframework.security.config.annotation.web.builders.HttpSecurity; nhập web.configuration.EnableWebSecurity; org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter; nhập @Configuration @EnableWebSecurity lớp công khai SecurityConfig mở rộng; WebSecurityConfigurerAdapter { @Ghi đè khoảng trống được bảo vệ configure(HttpSecurity http) ném Ngoại lệ { http .authorizeRequests() .antMatchers("/orders/grab/**").authenticated() // Cần có xác thực để truy cập vào giao diện lấy đơn hàng.anyRequest().permitAll() . và( ) .formLogin() .permitAll() .and() .logout() .permitAll() } @Bean public Mật khẩuBộ mã hóa mật khẩuBộ mã hóa() { trả về BCryptPasswordEncoding mới();

8. Tạo lớp Dịch vụ

Lớp Dịch vụ được sử dụng để xử lý logic nghiệp vụ, chẳng hạn như xác minh trình độ của tài xế, cập nhật trạng thái đơn hàng, v.v.

OrderService.java:

nhập org.springframework.beans.factory.annotation.Autowired; nhập org.springframework.stereotype.Service; nhập org.springframework.transaction.annotation.Transactional nhập java.util.Optional; @Service lớp công khai OrderService { @Autowired Private OrderRepository; orderRepository; @Autowired riêng DriverRepository driverRepository @Transactional boolean lấyOrder(Dài) orderId, Long driverId) { Tùy chọn tùy chọnOrder = orderRepository.findById(orderId); if (!OptionalOrder.isPresent() || tùy chọnOrder.get().getStatus() != OrderStatus.AVAILABLE) { return false } Tùy chọn  tùy chọnDriver = driverRepository.findById(driverId); (!OptionalDriver.isPresent()) { return false; } Thứ tự đặt hàng = optionOrder.get(); order.setDriver(OptionalDriver.get()); ĐÚNG VẬY; } }

9. Định cấu hình hàng đợi tin nhắn (chẳng hạn như RabbitMQ hoặc Kafka)

Đối với chức năng lấy đơn hàng, việc sử dụng hàng đợi tin nhắn có thể cải thiện khả năng xử lý đồng thời và tốc độ phản hồi của hệ thống.

Lớp cấu hình RabbitMQ:

nhập org.springframework.amqp.core.Queue; nhập org.springframework.amqp.rabbit.connection.ConnectionFactory; nhập org.springframework.amqp.rabbit.core.RabbitTemplate; nhập khẩu org.springframework.amqp.rabbit.listener.adapter.MessageListenerAdapter; nhập org.springframework.context.annotation.Bean; nhập org.springframework.context.annotation.Configuration @Configuration public class RabbitMQConfig { Chuỗi tĩnh cuối cùng QUEUE_NAME = "orderQueue "; @Bean Hàng đợi() { trả về mới Queue(QUEUE_NAME, true); } @Bean SimpleMessageListenerContainer container(ConnectionFactory ConnectionFactory, MessageListenerAdapter listenAdapter) { SimpleMessageListenerContainer container = new SimpleMessageListenerContainer(); container.setConnectionFactory(connectionFactory); container.setQueueNames(QUEUE_NAME); thùng chứa; } @Bean MessageListenerAdapter listenAdapter(OrderService orderService) { return new MessageListenerAdapter(orderService, "processOrder"); } @Bean RabbitTemplate rabbitTemplate(ConnectionFactory ConnectionFactory) { return new RabbitTemplate(connectionFactory);

Thêm phương thức xử lý tin nhắn trong OrderService:

nhập org.springframework.amqp.rabbit.core.RabbitTemplate; nhập org.springframework.beans.factory.annotation.Autowired; nhập org.springframework.stereotype.Service; riêng tư RabbitTemplate rabbitTemplate; public void PublishOrder(Order Order) { rabbitTemplate.convertAndSend(RabbitMQConfig.QUEUE_NAME, order); } public void processOrder(Order order) { // Xử lý logic, chẳng hạn như cập nhật trạng thái đơn hàng thành đã chỉ định, v.v. // Tại đây bạn có thể gọi phương thức GrabOrder hoặc logic khác } }

10. Kiểm tra đơn vị

Viết bài kiểm tra đơn vị để xác minh logic lấy đơn hàng của bạn.

OrderServiceTest.java:

nhập org.junit.jupiter.api.Test; nhập org.junit.jupiter.api.extension.ExtendWith; nhập org.mockito.InjectMocks; nhập org.mockito.Mock; tĩnh org.junit.jupiter.api.Assertions.*; nhập tĩnh org.mockito.Mockito.*; @ExtendWith(MockitoExtension.class) public class OrderServiceTest { @Mock Private OrderRepository orderRepository; @Mock Private DriverRepository driverRepository; @InjectMocks Private OrderService orderService; @Test public void testGrabOrderSuccess() { Lệnh đặt hàng = Lệnh mới (); order.setId(1L); order.setStatus(OrderStatus.AVAILABLE); Trình điều khiển trình điều khiển = new Driver(); driver.setId(1L); khi(orderRepository.findById(1L)).thenReturn(Optional.of(order)); 1L)).thenReturn(Optional.of(driver)); kết quả boolean = orderService.grabOrder(1L, 1L); khẳng địnhTrue(kết quả); xác minh(orderRepository, lần(1)).save(any(Order.class)); } @Test public void testGrabOrderNotFound() { when(orderRepository.findById(1L)).thenReturn(Optional) .empty()); kết quả boolean = orderService.grabOrder(1L, 1L); khẳng địnhFalse(kết quả); verify(orderRepository, never()).save(any(Order.class)); } // Các bài kiểm tra khác... }

11. Ghi nhật ký

Sử dụng các thư viện ghi nhật ký như SLF4J và Logback để ghi nhật ký các hoạt động quan trọng.

Định cấu hình Đăng nhập lại trong application.properties:

thuộc tínhSao chép codelogging.level.com.example.ridesharing=DEBUG

Đăng nhập vào lớp Dịch vụ:

import org.slf4j.Logger; import org.slf4j.LoggerFactory; @Service public class OrderService { riêng tư tĩnh cuối cùng Logger logger = LoggerFactory.getLogger(OrderService.class); // Mã trước đó... @Transactional public boolean GrabOrder(Long orderId) , Long driverId) { logger.debug("Đang cố lấy đơn hàng {} của tài xế {}", orderId, driverId); Tùy chọn tùy chọnOrder = orderRepository.findById(orderId); if (! tùy chọnOrder.isPresent() || tùy chọnOrder.get().getStatus() != OrderStatus.AVAILABLE) { logger.debug("Order {} không có sẵn hoặc không tồn tại", orderId); trả về sai; } Tùy chọn tùy chọnDriver = driverRepository.findById(driverId); if (! optionDriver.isPresent()) { logger.debug("Driver {} không tồn tại", driverId); tùy chọnDriver.get()); order.setStatus(OrderStatus.GRABBED); orderRepository.save(order); logger.debug("Lệnh {} được lấy thành công bởi trình điều khiển {}", orderId, driverId return true;

12. Triển khai và vận hành

Cuối cùng, hãy xem xét cách triển khai và vận hành ứng dụng của bạn, bao gồm sử dụng Docker để chứa, định cấu hình đường dẫn CI/CD, v.v.

Các bước và ví dụ về mã này cung cấp một khuôn khổ hoàn chỉnh để triển khai dự án gọi xe trực tuyến bao gồm chức năng gọi xe. Tất nhiên, tùy thuộc vào nhu cầu cụ thể của bạn, bạn có thể cần điều chỉnh hoặc thêm nhiều tính năng hơn.

5. Triển khai giao diện người dùng

Trong quá trình triển khai thực tế phần front-end của chức năng lấy đơn hàng trong dự án gọi xe trực tuyến Java, các framework front-end như React, Vue.js hoặc Angular thường có thể được sử dụng để xây dựng giao diện người dùng. Để đơn giản, ở đây chúng tôi sử dụng React và Redux để triển khai một ứng dụng front-end cơ bản cho phép tài xế xem đơn hàng và lấy đơn hàng.

1. Cấu trúc dự án

Giả sử cấu trúc dự án như sau:

my-ridesharing-app/ ├── public/ │ ├── index.html │ └── ... ├── src/ │ ├── actions/ │ │ └── orderActions.js │ ├── thành phần/ │ │ ├── OrderList.js │ │ ├── OrderItem.js │ │ └── App.js │ ├── bộ giảm tốc/ │ │ └── orderReducer.js │ ├── store/ │ │ └── index.js │ ├──index.js │ └── ... ├── pack.json └── ...

2. Cài đặt phụ thuộc

Trước tiên, hãy đảm bảo bạn đã cài đặt Node.js và npm, sau đó chạy các lệnh sau trong thư mục gốc của dự án để khởi tạo dự án React và cài đặt các phần phụ thuộc cần thiết:

npx create-react-app my-ridesharing-app cd my-ridesharing-app npm cài đặt redux Reac-redux redux-thunk axios

3. Triển khai mã giao diện người dùng

(1) src/store/index.js - Cấu hình Redux Store.

nhập { createStore, applyMiddleware } từ 'redux'; nhập thunk từ 'redux-thunk'; nhập rootReducer từ '../reducers'; const store = createStore(rootReducer, applyMiddleware(thunk));

(2) src/reducers/orderReducer.js - định nghĩa Giảm tốc.

const initState = { order: [], loading: false, error: null, }; const getOrdersSuccess = (state, action) => ({ ...state, order: action.payload, loading: false, error: null, }); const getOrdersFailure = (trạng thái, hành động) => ({ ...state, loading: false, error: action.payload, }); const GrabOrderSuccess = (trạng thái, hành động) => { constupdateOrders = state.orders.map(order => order.id === action.payload.id ? { ...order, gone: true } : order ); đã cập nhậtOrders, }; }; const orderReducer = (state = initState, action) => { switch (action.type) { case 'FETCH_ORDERS_REQUEST': return { ...state, loading: true, }; 'FETCH_ORDERS_SUCCESS': trả về getOrdersSuccess(state, action); trường hợp 'FETCH_ORDERS_FAILURE': return seekOrdersFailure(state, action); trường hợp 'GRAB_ORDER_SUCCESS': return GrabOrderSuccess(state, action); mặc định: return state;

(3) src/actions/orderActions.js - định nghĩa Người tạo hành động.

nhập trục từ 'axios'; xuất const getOrders = () => công văn không đồng bộ => { công văn ({ type: 'FETCH_ORDERS_REQUEST' }); thử { const reply = đang chờ axios.get('/api/orders'); / Giả sử địa chỉ API phụ trợ Clark({ type: 'FETCH_ORDERS_SUCCESS', payload: reply.data } }); bắt (lỗi) { Clark({ type: 'FETCH_ORDERS_FAILURE', payload: error.message } } }); /orders/${orderId}/grab`); // Giả sử địa chỉ API phụ trợ submit({ type: 'GRAB_ORDER_SUCCESS', tải trọng: reply.data }); } bắt (lỗi) { console.error('Lệnh lấy không thành công:', error.message } });

(4) src/comComponents/OrderItem.js - thành phần mục đặt hàng.

nhập Phản ứng từ 'react'; nhập { useDispatch } từ 'react-redux'; nhập { GrabOrder } từ '../actions/orderActions'; const OrderItem = ({ order }) => { const công văn = useDispatch(); const handGrab = () => { công văn(grabOrder(order.id)); return ( 
 
{order.passengerName
 
Nhận hàng: {order.pickupLocation
 
Trả hàng: {order.dropoffLocation
  {order.grabbed ? 'Grabbed' : 'Lấy đơn hàng'}  
 };

(5) src/comComponents/OrderList.js - thành phần danh sách đơn hàng.

nhập React, { useEffect } từ 'react'; nhập { useDispatch, useSelector } từ 'react-redux'; nhập {fetchOrders } từ '../actions/orderActions'; nhập OrderItem từ './OrderItem'; () => { const Clark = useDispatch(); const { đơn hàng, đang tải, lỗi } = useSelector(state => state.orders); useEffect(() => { Clark(fetchOrders()); }, [dispatch]); if (đang tải) return 
Đang tải...
; >Lỗi: {error

nhập React từ 'react'; nhập OrderList từ './OrderList'; nhập { Nhà cung cấp } từ 'react-redux'; nhập cửa hàng từ '../store'; const App = () => (  
 
Ứng dụng chia sẻ xe
  
  );

nhập React từ 'react'; nhập ReactDOM từ 'react-dom'; nhập './index.css'; nhập Ứng dụng từ './comComponents/App' nhập báo cáoWebVitals từ './reportWebVitals'; React.StrictMode>  , document.getElementById('root') ); báo cáoWebVitals();

bash sao chép mã npm bắt đầu