Redux-thunk la gi

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

Bạn đang xem: Redux thunk là gì?

Bạn đang xem: Tại sao chúng ta nên dùng một middleware như redux thunk

quý khách hàng hoàn toàn có thể tò mò cụ thể về middleware trong Redux tại đây.

quý khách có thể thấy biểu đồ gia 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 như thế nào là phổ biến nhất.

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

Tôi đã sử dụng Redux-Saga, cùng thấy rằng nó sẽ trở nên tân tiến từng ngày. Tôi đã và đang viết một bài về cách sử dụng nó tại đây. Tôi đã khôn cùng say mê sử dụng saga, nhưng lại tôi đã nói nó tất cả một tý phức hợp với hơi không cần thiết so với một app đơn giản rất cần được cách xử trí những action bất đồng nhất.

Tôi chưa sử dụng 2 package sót lại yêu cầu quan yếu bình luận về chúng.

Redux-thunk là một đoạn code bé dại chúng ta 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 sẽ là toàn bộ về redux-thunk. Nhưng chớ bị lừa bởi sự dễ dàng này. Nó là 1 trong đoạn code đẹp với có tác dụng được không ít máy.

Cách tôi khiến cho bạn đọc được redux-thunk là gì?

Thông qua vấn đề tôi đang sử dụng redux-thunk vài lần, tôi mong mỏi đọc đúng đắn gần như trang bị vận động thế nào.

Trong post này, tôi sẽ giải thích đúng đắn bí quyết function applyMiddleware trong redux cùng createThunkMiddleware vào redux-thunk chuyển động. Chúng ta bắt buộc phát âm đông đảo function này thiệt ví dụ biện pháp async được xử lý.

Nếu chúng ta xem code 2 function applyMiddleware cùng createThunkMiddleware chúng rất có thể khó khăn nếu khách hàng xa lạ với các concept dưới đây:

ES6 arrow functionsComposing functionsCurrying functions

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

Nhưng tôi đang viết bài xích này để giúp đỡ những người dân không nắm rõ gần như concept bên trên hoặc không biết kĩ càng về nó. Đâu đó nghỉ ngơi mid cấp độ =))

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 không thương hiệu thành mang tên nhằm làm rõ rộng.Thêm vào các console.log trong số function để dễ hiểu về flow.Và cũng phân chia nhỏ những step nhằm dễ hiểu hơn.

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

Redux-Thunk là một middleware phổ biến nhất được dùng để xử lý các action bất đồng bộ trong Redux.Redux-Thunk là một middleware thông dụng nhất được dùng để giải quyết và xử lý những action bất đồng bộ trong Redux .Bạn đang xem : Redux thunk là gì

Bạn có thể tìm hiểu chi tiết về middleware trong Redux ở đây.

Bạn hoàn toàn có thể thấy biểu đồ so sánh những middleware của Redux được tải về nhiều nhất, giúp bạn biết được package nào là phổ cập nhất .

Như bạn thấy ở trên, redux-thunk là phổ cập nhất. So với những package khác là một khoảng chừng cách xa : – )

Tôi đã dùng Redux-Saga, và thấy rằng nó đang phát triển từng ngày. Tôi cũng đã viết một bài về cách sử dụng nó ở đây. Tôi đã rất thích sử dụng saga, nhưng tôi đã nói nó có một xíu phức tạp và hơi không cần thiết đối với một app đơn giản cần phải xử lý các action bất đồng bộ.

Tôi chưa dùng 2 package còn lại nên không hề phản hồi về chúng .Nhưng tôi sẽ khuyên bạn nên xem qua Redux-Saga .Xem thêm : ” Here And There Là Gì – “ Bộ Đôi ” Trong Tiếng Anh ( Phần I )Redux-thunk là một đoạn code nhỏ bạn hoàn toàn có thể xem 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 vì sự đơn giản này. Nó là một đoạn code đẹp và làm được rất nhiều thứ.

Cách tôi giúp bạn hiểu được redux-thunk là gì ?Thông qua việc tôi đã dùng redux-thunk vài lần, tôi muốn hiểu đúng chuẩn mọi thứ hoạt động giải trí như thế nào .Trong post này, tôi sẽ lý giải đúng mực cách function applyMiddleware trong redux và createThunkMiddleware trong redux-thunk hoạt động giải trí. Chúng ta cần hiểu những function này thật rõ ràng cách async được giải quyết và xử lý .Nếu bạn xem code 2 function applyMiddleware và createThunkMiddleware chúng hoàn toàn có thể khó nếu bạn không quen với những concept dưới đây :ES6 arrow functionsComposing functionsCurrying functionsES6 arrow functionsComposing functionsCurrying functionsNếu bạn đã nắm rõ những concept trên thì bạn hoàn toàn có thể đã biết cách redux-thunk hoạt động giải trí, và bài viết này hoàn toàn có thể không giúp được gì nhiều cho bạn .Nhưng tôi đã viết bài này để giúp những người chưa nắm rõ những concept trên hoặc chưa hiểu tường tận về nó. Đâu đó ở mid level =))

Tôi đã viết một ví dụ nhỏ về React-Redux, nó có xử lý một async action. Bạn có thể tham khảo ở đây.

Trong ví dụ này, tôi đã tạo ra một version của applyMiddleware và createThunkMiddleware để tôi hoàn toàn có thể :Convert ES6 arrow functions không tên thành có tên để hiểu rõ hơn.Thêm vào các console.log trong các function để dễ hiểu về flow.Và cũng chia nhỏ các step để dễ hiểu hơn.Convert ES6 arrow functions không tên thành có tên để hiểu rõ hơn. Thêm vào những console.log trong những function để dễ hiểu về flow. Và cũng chia nhỏ những step để dễ hiểu hơn .Còn đây là version của applyMiddleware function của tôi :