Chào chúng ta, bây giờ mình đang rất được training về React js với cũng tương đối vất vả với một loạt phần đa khái niệm vào React Js. Hôm ni bản thân xin viết một bài bác về những vấn đề cũng tương đối nâng cao vào React Js. Nếu là tín đồ new học tập về React, chúng ta yêu cầu chũm đều vấn đề này trước như: Component, props, state, life cycle,...

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

Trước Lúc đi vào 2 có mang Redux thunk cùng Redux-saga. Mình vẫn trải qua về Redux, nó là gì với nó được dùng để triển khai gì?

Redux

Lúc redux chưa Ra đời, mong mỏi truyền data từ 1 Component lịch sự Component không giống thì tại component kia bản thân đang get nó trải qua props, cùng giả dụ bản thân gán quý giá của mang đến state của component là props bản thân truyền vào thì nó render lại UI. Trong ngôi trường thích hợp mình truyền data từ component ông nội cho component con cháu thì đề xuất trải qua component thân phụ. Điều này trong các ứng dụng phức tạp sẽ khá nặng nề nhằm cai quản trong việc thống trị các state, chưa kể ví như bao gồm bug xảy ra thì bài toán debug nhằm tìm ra sự việc cũng không còn đơn giản, kèm theo rất nhiều vụ việc khác thì Redux vẫn lộ diện nhằm giải quyết và xử lý vấn đề này:

Các bạn hãy quan sát vào sơ đồ gia dụng bên dưới:

Đầu tiên redux tất cả 3 yếu tố chính:

action: Khi người tiêu dùng tiến hành một hành động hay là một sự kiện nào kia như thể submit một khung hoặc Điện thoại tư vấn một api, thì action này sẽ yêu cầu được gửi mang đến redux store vị method store.dispatch() với mình đã truyền action vào.ví dụ:

export const listAll = () => return type: Types.LIST_ALL ;store.dispatch(listAll());Reducer: Reducer vẫn đem những action, tiếp đến phân tích với trả về các state bắt đầu mang đến storeStore: Là yếu tố khôn cùng đặc biệt, nó vẫn cất các state của các component. Thông qua đó xuất phát điểm từ một component bản thân sẽ kết nối với store để mang, update những state cho các componentĐến trên đây thì kiên cố các bạn sẽ hình cần sử dụng được, vắt vì chưng truyền data tự component ông nội lịch sự component cháu cùng nên trải qua thằng component cha. thì hiện thời mình sẽ không truyền hình dạng kia nữa. Mà mình sẽ đem tất cả các data lưu giữ vào state bên trên một chiếc store của redux thôi. tiếp nối thằng component nào muốn cần sử dụng thì cứ vấn đề truy vấn cho store rước về mà dùng.

Xem thêm: Sự Thật Về " Con Giấm Là Gì ? Cách Làm Con Giấm Sữa Tại Nhà Con Giấm Nuôi Là Gì

Middleware library

ok vậy tôi đã đọc phương châm của redux trong ứng dụng react js, trên thực tiễn thì vấn đề thao tác với những state nghỉ ngơi redux store có tương đối nhiều sự việc không giống, ví dụ bạn thích Điện thoại tư vấn api, hoặc áp dụng những hàm setTimeout để thao tác làm việc các state thì sao, toàn bộ gần như bài toán đó được call chung là side effects, vậy có tác dụng vậy như thế nào để mình handle được đông đảo side effect đó. Thì lúc này middleware library sẽ giúp cách xử trí hồ hết vấn đề này.Các chúng ta cũng có thể hiều 1-1 gian middleware library là thành phần đứng giữa những action cùng reducer. khi một action được dispatch vào reducer, thì nó đang soát sổ coi action kia bao gồm thực thiện bất đồng bộ hay là không, giả dụ có nó đang canh cho action bất đồng hóa tiến hành xong xuôi rồi new đưa action vào vào reducer.

Xem thêm: Tại Sao Biển Lặng Gió Mà Vẫn Có Sóng Biển Là Gì, Sóng Biển Là Gì

Một số library middleware thường xuyên sử dụng:

Redux-thunkRedux-sagaRedux-promiseRedux-thunk

Ở vào phạm vi của nội dung bài viết này bản thân đã chỉ nói về redux thunk cùng redux saga.Redux thunk:Chắc chúng ta cũng biết là action thường trả về dạng object, bạn ta tuyệt hotline là plain Javascript object. Trong trường hòa hợp mình muốn điện thoại tư vấn một api để trả về một menu trending thì action của bản thân cần thiết trả về một plain Javascript object thông thường được, cơ mà mình vẫn đề xuất trả về một function, action điều đó được Điện thoại tư vấn là async action. Đây là code đến ví dụ của mình:

export const fetchTrendingRequest = () => return (dispatch) => callAPI().then((data)=> dispatch(fetchTrending(data.data)); ) export const fetchTrending = (trendings) => return type: Types.FETCH_TRENDING, trendings Các các bạn hãy quan liêu gần kề action thứ nhất của chính bản thân mình, ở đây bản thân trả về một function cùng function này sẽ triển khai hotline api để lấy về listTrending, từ bây giờ redux thunk nó vẫn chất nhận được lịch trình dừng lại cho đến khi api call ngừng với trả về công dụng. Tiếp cho mình call cho một action dưới truyền data vừa new get được vào với hôm nay redux thunk nó đang chất vấn action này sẽ không triển khai async cho nên nó vẫn mang tới cho reducer để xử lý.Đây cũng là 1 trong quá trình cơ bản mà lại redux thunk thực hiện. Khá là dễ dàng và đơn giản, còn về làm cho cố gắng nào để mix up redux thunk thì các chúng ta có thể xem ngơi nghỉ đây:https://github.com/reduxjs/redux-thunk

Redux saga

Về khía cạnh bề ngoài chuyển động thì nó tương tự như như thunk, dùng làm handle các side effect. Redux saga cung ứng các hàm helper effect, những hàm này đang trả về một effect object chứa đựng biết tin quan trọng chỉ dẫn middeware của Redux có thể triển khai tiếp những hành vi khác. Các hàm helper effect sẽ được thực hiện trong các generator function. Generator function là một tính năng vượt trội trong ES6, nó cũng là một function. Tuy nhiên điểm quan trọng của function này là có thể tạm dừng nhằm thực hiện một Việc không giống, hoặc rất có thể Gọi đến một Generator function không giống. Chi máu về Generator function: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

Một số helper của generator function được redux saga sử dụng:

takeEvery() : thực hiện và trả lại công dụng của những actions được gọi.takeLastest() : Tức là ví như bọn họ triển khai một loạt những actions, nó đã chỉ triển khai với trả lại công dụng của của actions cuối cùng.take() : tạm dừng cho đến lúc nhận ra actionput() : dispatch một action.call(): điện thoại tư vấn function. Nếu nó return về một promise, tạm ngưng saga cho đến khi promise được giải quyết và xử lý.race() : chạy nhiều effect đồng thời, tiếp đến diệt tất cả ví như một trong số kia kết thúc
*
Tóm lại:

Đối cùng với redux thunk nó gồm có ưu điểm yếu như sau:

Redux ThunkRudux-saga
Ưu điểmĐơn giản, trẻ trung và tràn đầy năng lượng, dễ dàng áp dụng , dễ dàng tiếp xúc so với các bạn là bắt đầu học tập ReactĐối cùng với đông đảo dự án công trình tinh vi áp dụng redux-saga code đang clean với dễ dàng thử nghiệm hơn so với redux-thunk, giải quyết được đều vấn đề về chains of promises
Nhược điểmChỉ tương xứng cùng với các dự án nhỏ, cách xử trí ngắn gọn xúc tích đơn giản. Còn so với hầu như dự án công trình phức hợp áp dụng redux-thunk vẫn nên tốn các cái code cùng gây trở ngại đến việc kiểm tra các actionPhức tạp, tốn thời hạn mang đến thành viên bắt đầu vào team, nặng nề về xử trí lô ghích, ko giành riêng cho những áp dụng đối kháng giản

Trên đó là tôi đã chia sẻ về redux-thunk cùng resux-saga. Đây là 2 middleware library được sử dụng các vào Reactjs, vấn đề lựa chọn redux-thunk tuyệt redux-saga còn tùy nằm trong vào project. Nếu bài viết gồm có sự việc không đúng xót, hy vọng phần đông bạn góp phần chủ kiến để bài viết được hoàn thành.


Chuyên mục: Blog