' Thunk Là Gì - React Js: Phân Biệt Redux

      77
Redux-Thunk là một trong middleware thông dụng tuyệt nhất được dùng để xử trí các action bất nhất quán trong Redux.

Bạn đang xem: ' Thunk Là Gì - React Js: Phân Biệt Redux

Quý khách hàng hoàn toàn có thể khám phá chi tiết về middleware trong Redux tại chỗ này.

Quý Khách hoàn toàn có thể thấy biểu vật dụng so sánh những middleware của Redux được tải về các tốt nhất, giúp bạn biết được package nào là một trong những chọn lựa tốt nhất cho doanh nghiệp.


*

*

Nhỏng các bạn thấy sinh sống trên, redux-thunk là phổ biến nhất. So với các package không giống là một khoảng cách xa :-)

Tôi đang sử dụng Redux-Saga, với thấy rằng nó sẽ phát triển từng giờ. Tôi đã và đang viết một bài bác về phong thái áp dụng nó tại chỗ này. Tôi sẽ hết sức yêu thích thực hiện saga, dẫu vậy tôi đã nói nó có một chút tinh vi cùng hơi không quan trọng đối với một phầm mềm đơn giản cần phải xử trí những action bất đồng hóa.

Tôi chưa cần sử dụng 2 package sót lại đề xuất tất yêu comment về chúng.

Nhưng tôi sẽ khuyên ổn bạn nên xem qua Redux-Saga.

Xem thêm: Khái Niệm Văn Phòng Là Gì ? 6 Loại Hình Văn Phòng Phổ Biến Trên Thị Trường

Redux-thunk là 1 đoạn code nhỏ chúng ta cũng có thể coi qua:

function createThunkMiddleware(extraArgument) return ( dispatch, getState ) => next => action => if (typeof action === 'function') return action(dispatch, getState, extraArgument); return next(action); ;const thunk = createThunkMiddleware();thunk.withExtraArgument = createThunkMiddleware;export default thunk;Đúng vậy đó là tất cả về redux-thunk. Nhưng đừng bị lừa bởi sự đơn giản và dễ dàng này. Nó là 1 đoạn code rất đẹp cùng làm được tương đối nhiều máy.

Cách tôi giúp bạn hiểu được redux-thunk là gì?

Thông qua câu hỏi tôi vẫn cần sử dụng redux-thunk vài lần, tôi ước ao hiểu đúng mực đều sản phẩm vận động ra sao.

Trong post này, tôi đã lý giải đúng chuẩn phương pháp function applyMiddleware trong redux với createThunkMiddleware vào redux-thunk hoạt động. Chúng ta buộc phải phát âm đầy đủ function này thiệt cụ thể bí quyết async được giải pháp xử lý.

Nếu các bạn coi code 2 function applyMiddleware cùng createThunkMiddleware bọn chúng rất có thể khó nếu bạn xa lạ cùng với các concept bên dưới đây:

ES6 arrow functionsComposing functionsCurrying functions

Nếu bạn vẫn nắm rõ đa số concept trên thì bạn cũng có thể đã hiểu cách thức redux-thunk chuyển động, cùng nội dung bài viết này rất có thể không hỗ trợ được gì nhiều cho chính mình.

Nhưng tôi vẫn viết bài xích này để giúp đỡ những người chưa nắm vững gần như concept bên trên hoặc chưa biết tận tường về nó. Đâu đó làm việc mid level =))

Tôi sẽ viết một ví dụ nhỏ về React-Redux, nó bao gồm xử trí một async action. Bạn có thể tìm hiểu thêm ở chỗ này.

Trong ví dụ này, tôi đang tạo nên một version của applyMiddleware và createThunkMiddleware để tôi gồm thể:

Convert ES6 arrow functions ko tên thành có tên nhằm hiểu rõ rộng.Thêm vào những console.log trong số function nhằm dễ hiểu về flow.Và cũng chia bé dại các step để dễ hiểu hơn.

Còn đó là version của applyMiddleware function của tôi: