Bắt đầu với Redux Thunk

Tiểu bang là một phần lớn của một ứng dụng phản ứng, đó là lý do tại sao Redux thường được kết hợp với nó. Dữ liệu đó thường xuất phát từ cơ sở dữ liệu, yêu cầu yêu cầu và phản hồi. Đối với một số ứng dụng, giao tiếp này có thể là không đổi. Nó có thể khó kiểm soát chỉ trong các thành phần phản ứng.

Điều này cũng giới thiệu một số vấn đề mới - Điều gì xảy ra nếu nó tải chậm, hoặc không tải nào cả? Mỗi thành phần xử lý dữ liệu không đồng bộ sẽ phải chứa logic để xử lý các kịch bản này.

Một 'Thunk' là một khái niệm có thể giúp với tình huống này. Mỗi Thunk là một hàm trả về một chức năng khác. Chức năng đó sau đó có thể được gọi ở điểm sau, giống như một cuộc gọi lại. Nếu chúng ta có thể gửi một chiếc Thunk thay vì một đối tượng hành động, chúng ta có thể thêm một số logic bổ sung trong phản ứng với một sự kiện khác.

Redux Thunk là một thư viện nằm ở giữa các hành động được gửi đi và bộ giảm tốc. Khi nhìn thấy một chiếc thunk được gửi đi, nó sẽ chuyển một số phương thức vào hàm trả về có thể được sử dụng để gửi thêm các hành động, như một sự kiện thành công hoặc lỗi.

• 20 plugin jQuery Brilliant

Trong hướng dẫn này, chúng tôi sẽ sử dụng thunk để giúp kéo dữ liệu từ máy chủ thay vì từ tệp JSON, làm việc với Photoshare. - Một ứng dụng bình luận ảnh được cung cấp bởi Redux.

Có một dự án trang web mới, nhưng cần nó để đơn giản? Dưới đây là hướng dẫn của chúng tôi để tốt nhất người tạo ra trang web và web hosting dịch vụ. Chia sẻ tập tin với những người khác? Nhận của bạn lưu trữ đám mây đúng.

Tải về các tập tin cho hướng dẫn này.

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

Có hai phần cho dự án này - trang web phía trước và máy chủ cuối ổ cắm chạy. Trong khi hướng dẫn tập trung vào mặt trước, chúng ta cần một máy chủ đang chạy để tìm nạp ảnh. Tải xuống các tệp dự án và cài đặt các phụ thuộc cho cả trang web và máy chủ. Chạy các máy chủ cho cả hai và để chúng chạy trong nền.

 / * một thiết bị đầu cuối bên trong / trang web * /
& gt; Sợi.
& gt; Sợi bắt đầu
/ * một thiết bị đầu cuối bên trong / máy chủ * /
& gt; Sợi.
& gt; Sợi bắt đầu 

02. Thiết lập phần mềm trung gian

Redux Thunk là một Middleware. - Chức năng nằm giữa các hành động và bộ giảm tốc có thể thay đổi cách các hành động đó hoạt động. Redux hỗ trợ nhiều bộ phần mềm trung gian bao gồm toàn bộ ứng dụng. Họ được thêm vào khi cửa hàng được tạo bằng cách sử dụng soạn, biên soạn phương pháp. Thêm phần mềm trung gian vào createstore. phương thức trong index.js.

 Nhập {áp dụngMidDleware, Soạn}
từ "Redux";
nhập khẩu từ "Redux-Thunk";
[...]
Const Store = Createstore (
RootReducer,
soạn, biên soạn(
Áp dụngMidDleware (Thunk),
những công cụ của nhà phát triển
)
); 

03. Thiết lập người tạo hành động

Điều đầu tiên chúng ta cần làm bây giờ là tải các bức ảnh vào bộ sưu tập. Giống như các hành động thông thường, chúng ta cần người tạo hành động cho các tiểu bang khác nhau mà một cuộc gọi không đồng bộ sẽ mất. Hầu hết sẽ có khởi đầu Cái gì sự thành công và lỗi hành động. Những thứ này cho phép Redux biết những gì JavaScript đang bận đang làm. Trong Hành động / Ảnh / Ảnh.js , Thiết lập ba người tạo hành động cho các tiểu bang khác nhau này.

 Xuất const loadgallerystart = () = & gt; ({
Loại: load_gallery_start});
Xuất const loadgallerysuccess =
Ảnh = & GT; ({
Loại: load_gallery_success,
Ảnh
});
Xuất const loadgalleryerror = () = & gt; ({
Loại: load_gallery_error}); 

04. Tạo một thước thu để tải

Thunks làm việc chính xác giống như người tạo hành động. Chúng tôi vẫn gửi giá trị trả về, nhưng lần này nó trả về một hàm thay vì một đối tượng. Phần mềm trung gian mà chúng tôi thiết lập trước đó sẽ truyền một phương thức gửi vào hàm trả về. Điều này cho phép chúng tôi gửi nhiều hành động hơn để Redux sau công văn ban đầu. Tạo một logogallery. phương thức trả về một hàm. Hiện tại, nó đã gửi một hành động để chỉ ra rằng bộ sưu tập vẫn đang tải.

 Xuất const loadgallery = () = & gt;
Dispatch = & GT; Đồn là
Công văn (loadgallerystart ());
}; 

05. Tải dữ liệu từ máy chủ

Chúng tôi đã sẵn sàng để bắt đầu tìm nạp từ máy chủ mà chúng tôi thiết lập ở đầu. Chúng ta có thể làm điều này bằng cách sử dụng AXIOS. - Một gói được thiết kế để làm việc với những lời hứa trên các trình duyệt khác nhau. Nhập khẩu AXIOS. và thực hiện một yêu cầu cho các bức ảnh trong logogallery. . Nếu lời hứa sẽ giải quyết, hãy gửi hành động thành công và nếu không gửi hành động lỗi. Với điều đó, cấu trúc của Thunk đã hoàn tất.

 Nhập AXIOS từ "AXIOS";
[...]
TRẢ LẠI AXIOS.
.get ("http: // localhost: 3001 / Ảnh")
.Then (phản hồi = & gt; công văn (
loadgallerysuccess (feedback.data)))
.catch (() = & gt; Công văn (
loadgalleryError ())); 

06. Công văn Thunk

Thunk sẽ không làm bất cứ điều gì cho đến khi nó được gửi đi. Chúng ta có thể làm điều đó trong một thành phần phản ứng giống như bất kỳ hành động nào khác. Thời điểm tốt để bắt đầu tải ảnh là khi người dùng xem bộ sưu tập chính. Chúng ta có thể sử dụng phản ứng Thành phầnDIDMOUNT. Phương thức vòng đời dưới dạng kích hoạt, sau khi kiểm tra bộ sưu tập chưa được tải. Trong Thành phần / Container / Gallery / Gallery.js Công văn A. logogallery. hành động bằng cách thêm nó vào mapdispatchtoprops. và gọi nó trong Thành phầnDIDMOUNT. .

 Thành phầnDIDMOUNT () {
if (! cái này.props.photos Tải) {
this.props.LoadGallery ();
Không thể
Không thể
Xuất Const MapDispatchtoprops =
 Dispatch = & GT; ({
loadGallery: () = & gt;
Công văn (loadGallery ()),
}); 

07. Thêm ảnh về thành công

Khi các bức ảnh quay trở lại từ máy chủ, chúng tôi gửi một Load_gallery_success. hành động với những bức ảnh. Chúng ta cần phải có được điều này vào trạng thái thông qua Ảnh giảm tốc. Đầu đến đầu Giảm tốc / Ảnh / Ảnh.js và thêm một trường hợp cho hành động thành công. Tải trọng chứa tất cả các hình ảnh dưới dạng một mảng. Khi trạng thái được cập nhật, bộ chọn ảnh chuyển các ảnh thông qua thành phần Thư viện sẽ được hiển thị.

 Ốp lưng load_gallery_success:
Trả lại hành động.photos; 

08. Thiết lập UI

Hiện tại, các bức ảnh đột nhiên xuất hiện sau khi chúng được tải. Trên một kết nối chậm hơn, người dùng sẽ xem xét một màn hình trống cho đến khi yêu cầu kết thúc, nếu nó từng làm. Các hành động chúng tôi gửi để tải ảnh cũng có thể được chọn trong bộ giảm tốc UI để giữ giao diện cập nhật với những gì đang xảy ra. Cập nhật cờ tải và lỗi trong bộ giảm tốc UI tại Giảm tốc / UI / UI.JS .

 Ốp lưng load_gallery_error:
Trả lại {... Tiểu bang,
Đang tải: Sai, Lỗi: Đúng};
trường hợp load_gallery_start:
Trả lại {... Tiểu bang,
Đang tải: Đúng, Lỗi: Sai};
trường hợp load_gallery_success:
Trả lại {... Tiểu bang,
Đang tải: Sai}; 

09. Thêm bộ chọn tải và lỗi

Cũng như bản thân ảnh của bộ sưu tập, chúng tôi cần các bộ chọn để có được các giá trị của Hoa Kỳ khác nhau ra khỏi Redux. Chúng ta có thể truyền chúng vào bộ sưu tập, sau đó sẽ khiến các yếu tố khác nhau nếu một trong hai là đúng. Trong Bộ chọn / UI / UI.JS , Thêm một vài chức năng để lấy các giá trị.

 Xuất const isgalleryerrorored =
 Nhà nước = & gt; tiểu bang.ui.error;
Xuất const isgalleryloading =
 Nhà nước = & gt; tiểu bang.ui.loading; 

10. Thêm dữ liệu vào GalleryContainer

Với các bộ chọn sẵn sàng, bây giờ chúng có thể được thêm vào Bộ sưu tập Thành phần container. Thêm chúng ở đây có nghĩa là thành phần chịu trách nhiệm hiển thị bộ sưu tập không cần biết về cách dữ liệu đã đến. Đầu đến đầu Container / Gallery / Gallery.js và thêm các bộ chọn để Bản đồStatetoprops. . Tạo các hằng số cho các giá trị để giúp hiển thị trạng thái trong bước tiếp theo.

 const {lỗi, tải,
 hình ảnh} = this.props;
[...]
Xuất sao bản mapstatetoprops =
 Nhà nước = & gt; ({
Lỗi: IsgalleryErred (trạng thái),
Đang tải: isgalleryloading (trạng thái),
 }); 

11. Hiển thị tải và trạng thái lỗi

Mặc dù chúng tôi có lỗi và tải đạo cụ, hiện tại không có UI nào để biểu thị khi nào chúng hoạt động. Các đạo cụ này là các giá trị Boolean, có nghĩa là chúng ta có thể chuyển đổi màn hình của các thành phần khi chúng đúng. Cập nhật phương thức kết xuất để đảm bảo & lt; lỗi & gt; và & lt; đang tải & gt; các thành phần kết xuất thay vì bộ sưu tập khi cần.

 if (lỗi) {
return & lt; lỗi / & gt ;;
Không thể
Nếu (tải) {
TRẢ LẠI & LT; Đang tải / & GT ;;
} 

12. Lấy lại bộ sưu tập

Với bộ sưu tập được tải, chúng ta có thể chuyển sang một bức ảnh riêng lẻ. Nhấp vào bất kỳ hình ảnh nào và làm mới trang không tải ảnh sao lưu, vì chưa có hướng dẫn trên trang này để tải bộ sưu tập. Mở Container / Ảnh / Ảnh.js và tải bộ sưu tập trong Thành phầnDIDMOUNT. như trong Bộ sưu tập thành phần. Các Photosloaded. Kiểm tra sẽ không cố tải lại ảnh nếu chúng đã được tải trong bộ sưu tập.

 if (! This.props.photos Tải) {
this.props.LoadGallery ();
} 

13. Thêm một bình luận mới

Người dùng có thể nhấp vào ảnh nơi họ muốn để lại nhận xét. Thành phần trình bày ảnh sẽ chạy addnewcomment. chức năng prop khi điều này xảy ra. Bên trong addnewcomment. Chức năng, tính điểm mà người dùng đã nhấp vào ảnh. Máy chủ yêu cầu một giá trị tỷ lệ phần trăm số nguyên khi nó được lưu.

 Const ảnh = e.target
 .getboundingclientrect ();
const top = e.clientx - photo.left;
const còn lại = e.clienty - photo.top;
const toppc = math.round ((trên cùng /
 Photo.Width) * 100);
const rendepc = math.round ((bên trái /
 Ảnh.Height) * 100); 

14. Nói với Redux về nhận xét

Với vị trí được tính toán, sau đó chúng ta cần nói với Redux về nhận xét để nó có thể hiển thị mẫu nhận xét. Đã có một hành động được thiết lập để thêm nhận xét mới trên màn hình. Thêm vào addnewcomment. vào mapdispatchtoprops. và gọi nó sau khi chúng tôi tính toán vị trí của nhấp chuột.

 this.props.addnewcomment (
 Toppc, trái);
[...]
Xuất Const MapDispatchtoprops =
 Dispatch = & GT; ({
addnewcomment: (trên cùng, trái) = & gt;
Công văn (addnewcomment (trên cùng, trái)),
});

15. Hãy kể ảnh về bình luận mới

Khi thông tin bình luận mới được truyền cho Redux, chúng ta cần chuyển nó vào thành phần hiển thị hình ảnh. Điều này cho phép nó hiển thị biểu mẫu ở vị trí đó. Tìm getnewcomment. bộ chọn, thêm nó vào Bản đồStatetoprops. và vượt qua sự dự đoán vào & lt; photo & gt; .

 Xuất const Mapstatetoprops =
 (tiểu bang, đạo cụ) = & gt; ({
Newcomment: Getnewcomment (tiểu bang),
});
& lt; ảnh [...] MỚI MỚI = {
 this.props.newcomment} / & gt; 

16. Gọi Thunk trong bình luận

Nhấp vào ảnh bây giờ sẽ hiển thị mẫu nhận xét mới. Đây là thành phần được kết nối của riêng nó. Khi mẫu được gửi, nó gọi là một Gửi bình luận chức năng prop và được thông qua. Đây là một cái thunk mà chúng ta sẽ thực hiện. Mở ra container / newcomment / newcomment.js và thêm thulk vào mapdispatchtoprops. . Vượt qua dự đoán đó vào thành phần trình bày kết xuất.

 & lt; newcomment [...]
 Khớp = {Khớp} / & GT;
Xuất Const MapDispatchtoprops =
 Dispatch = & GT; ({
Khớp: Nhận xét = & GT; Công văn (
Khớp nối (Nhận xét))
});

17. Thu thập nội dung cho Thunk

Thunk để thêm một bình luận mới có cấu trúc tương tự để tìm nạp thư viện, bao gồm một hành động bắt đầu, thành công và lỗi. Có một cuộc tranh cãi thêm được truyền vào Thunk này - getstate. chức năng. Điều này cho phép truy cập trực tiếp vào trạng thái hiện tại để lấy dữ liệu từ nó. Tạo ra Gửi bình luận Thunk in. Hành động / Newcomment / Newcomment.js . Mỗi bình luận có liên quan đến một bức ảnh và người dùng. Đối với hướng dẫn này, ID người dùng được mã hóa cứng vào người sử dụng giảm tốc.

 Xuất xác định đính kèm = Nhận xét
 = & gt; (Công văn, Getstate) = & GT; Đồn là
Công văn (đính kèmStart ());
Const currentphotoid =.
getCienPhotoid (getstate ());
const user =.
getCienDuser (getstate ());
const {trái, top} =
getnewcomment (getstate ());
}; 

18. Đăng yêu cầu

Với tất cả các dữ liệu cần thiết tại chỗ, chúng tôi có thể gửi bình luận. Axios có A. bài đăng Phương pháp để đối phó với BÀI ĐĂNG yêu cầu, với đối số thứ hai là dữ liệu để gửi trong yêu cầu đó. Thêm yêu cầu vào Thunk, truyền dữ liệu trong trường hợp Snake để phù hợp với những gì máy chủ mong đợi.

 Trục Trở về
.bài đăng(
"http: // localhost: 3001 / Nhận xét", {
user_id: user.id,
Photo_ID: Hiện tại,
bình luận,
trái,
hàng đầu
}) 

19. Xử lý thành công và lỗi

Nếu lời hứa từ Axios giải quyết hoặc từ chối, chúng ta cần nói với ứng dụng về nó. Nếu nó giải quyết thành công, máy chủ sẽ vượt qua nội dung của bình luận. Chúng ta nên vượt qua điều đó với hành động thành công. Nếu nó bị từ chối, hãy bắn một hành động lỗi. Cập nhật lời hứa với sau đó và nắm lấy khối.

. Sau đó (({dữ liệu: {
 id, bình luận, trái, top}}) = & gt;
Công văn (
đính kèm (
id, bình luận, trái, trên cùng,
người dùng, currentphotoid)
)
)
.catch (() = & gt; Công văn (
 trình đính kèmError ()); 

20. Thêm bình luận vào ảnh

Ngay bây giờ, một khi bình luận được thêm vào thành công, nó sẽ bị xóa khỏi màn hình nhưng không thể nhìn thấy cho đến khi trang làm mới. Chúng ta có thể cập nhật bộ giảm tốc ảnh để nhận bình luận mới và thêm nó vào mảng Nhận xét của nó, để hiển thị như phần còn lại của chúng. Mở Bộ giảm tốc / Ảnh / Ảnh.js và thêm một trường hợp để xử lý hành động. Tạo một bản sao của trạng thái để đảm bảo chúng ta không vô tình biến đổi trạng thái hiện tại.

 Ốp lưng Gửi_comment_success:
const {id, bình luận, hàng đầu, trái,
người dùng, photoid} = Action.payload;
const newstate = json.parse (
Json.stringify (tiểu bang));
const ảnh = newstate.find (
Ảnh = & GT; Ảnh.Id === photoid);
Ảnh.push ({
ID, bình luận, trái, trên cùng, người dùng
});
trả lại newstate; 

21. Ẩn các bình luận khác

Cuối cùng, nếu một nhận xét khác được mở và người dùng muốn thêm một nhận xét mới, UI bị bừa bộn. Chúng ta nên ẩn hộp bình luận nếu một bình luận mới đang được sáng tác. Chúng ta có thể nối vào hiện tại Add_new_comment. hành động để xóa bình luận. giá trị. Đầu đến đầu Giảm tốc / UI / UI.JS và thêm một trường hợp cho điều đó.

 Ốp lưng add_new_comment:
trở về {
...tiểu bang,
bình luận: không xác định.
}; 

Bài viết này ban đầu được xuất bản trong số 283 của Tạp chí Thiết kế web sáng tạo Nhà thiết kế web . MUA VẤN ĐỀ 283 TẠI ĐÂY hoặc là Đăng ký nhà thiết kế web ở đây .

Những bài viết liên quan:

• 5 API JavaScript tuyệt vời
• Phát triển các thành phần React có thể tái sử dụng
• 9 của các khung JavaScript tốt nhất