Nơi để thực hiện cuộc gọi mạng trong ứng dụng phản ứng + redux

Question

Tôi đang cố gắng suy nghĩ về những gì mọi người sẽ xem xét các phương pháp hay nhất về cách mọi người tổ chức cuộc gọi mạng trong ứng dụng phản ứng + redux của họ. Tôi thường để các thành phần của tôi thực hiện các cuộc gọi, nhận dữ liệu và sau đó chuyển nó thành một hành động sẽ bị giảm. Đây có phải là thực hành tốt nhất hay tốt hơn là tách riêng mạng ra khỏi các thành phần của tôi và đặt logic đó ở đâu đó khác trong ứng dụng, có thể trong bộ giảm tốc?

Answer 1

Nơi tốt nhất để thực hiện cuộc gọi mạng là người tạo hành động của bạn. Tuy nhiên, bạn sẽ cần một số phần mềm trung gian để làm việc đó tốt nhất. Hãy xem điều này promise-middleware (trên thực tế, tôi muốn đề nghị kiểm tra toàn bộ hướng dẫn đó). Nếu bạn sử dụng phần mềm trung gian đó, bạn có thể có người tạo hành động trả lời lời hứa và cũng có ba loại hành động - một cho yêu cầu, một để xử lý câu trả lời thành công và một để xử lý các yêu cầu không thành công. Sau đó, bạn chỉ cần lắng nghe 3 hành động đó trong bộ giảm tốc của bạn.

Vì vậy, với middleware đó, bạn có thể có một tác giả hành động như thế này:

function networkCall() { 
    return { 
     types: ['MAKE_REQUEST', 'REQUEST_SUCCESS', 'REQUEST_FAILURE'], 
     promise:() => { 
      return new Promise((resolve, reject) => { 
       $.ajax({ 
        url: 'example.com/api' 
        type: 'GET' 
       }); 
      }) 
     } 
    } 
} 

Rõ ràng bạn được tự do để xây dựng middleware lời hứa của mình, nhưng điều đó nên đặt bạn đi đúng hướng.

Answer 2

Tôi thực hiện theo mẫu của các hành động trong redux tutorials for Async Actions. Nó có ý nghĩa nhất với tôi để giữ cho mọi thứ không đồng bộ trong các hành động - tránh xa cả các thành phần và cửa hàng/bộ giảm tốc.

Tôi cũng sử dụng Redux Crud để chuẩn hóa các hành động liên quan đến tác vụ mạng.

Answer 3

Bạn có thể sử dụng một phần mềm trung gian API, hoặc là redux-api-middleware hoặc một cái gì đó của riêng bạn (nó không phải là rất khó để write one).

Sau đó, ví dụ, người sáng tạo hành động của bạn có thể trở lại hoạt động như

{type: 'API_GET', url: '/api/userList', nextType: 'USER_LIST'} 

... mà sau này sẽ được xử lý bởi một middleware sẽ gửi yêu cầu thực tế và sau đó cử một hành động mới như:

{type: 'USER_LIST_FETCHED', status: 200, payload: [{id: 1, ...}, ...]} 
{type: 'USER_LIST_FAILED', status: 404, payload: {message: '...'}} 

Answer 4

Tôi nghĩ rằng đây là một việc đã được thực hiện ngay trong Angular. Bạn có tất cả các cuộc gọi mạng được đặt gọn gàng trong số services của mình. Điều này có thể dễ dàng được thực hiện trong Redux.

Các tài liệu đề xuất đúng rằng các cuộc gọi mạng nằm trong số actions của bạn. Tôi muốn đưa chúng vào một nơi riêng biệt, bạn có thể gọi nó là "dịch vụ". Ở đó bạn sẽ định nghĩa tất cả các hằng số của bạn như URL máy chủ API, các công cụ liên quan đến xác thực, v.v. Đây sẽ là nơi duy nhất nhận thức được chi tiết thực hiện các cuộc gọi mạng của bạn - thư viện nào bạn sử dụng (jQuery, axios, superagent, v.v.)

Tệp tác vụ của bạn sẽ nhập chức năng từ các dịch vụ đó và gọi cho chúng. Nếu sau này bạn quyết định trao đổi thư viện mạng, bạn sẽ không phải thay đổi số actions.