Tìm hiểu về redux thunk

     

(Bài viết này yêu cầu cần có kiến thức về Redux. Nếu các bạn chưa biết những gì về Redux, hoàn toàn có thể xem trên ĐÂY.)

Bản hóa học của Redux là lưu tất cả State của cục bộ ứng dụng vào trong 1 store duy nhất.

Bạn đang xem: Tìm hiểu về redux thunk

Cách để biến đổi state bên trên store là gửi một action là một PLAIN OBJECT (chứa type với payload). Tức thị trong kích hoạt bạn chỉ được trình lên một object chứ không hề được trình lên một function xuất xắc thứ gì đấy khác.

Middleware là gì?

Hiểu một cách đơn giản và dễ dàng middleware mang lại phép họ can thiệp vào giữa thời điểm dispatch một kích hoạt và thời gian action mang lại được reducer.

Thông thường trong những dự án, các actions trình lên store sẽ là một async kích hoạt . Những middleware sẽ bảo vệ rằng dữ liệu đã được trả về không còn rồi thì mới được quyền tiếp cận store .


*

Có nhiều nhiều loại middleware khác nhau, mình sẽ đề cấp tới Redux thunk trong bài này.

Redux thunk là gì?

Redux-thunk cũng là một trong những middleware mang đến phép họ dispatch lên reducer mộtfunction chứ không cần phải là 1 plant object .

Xem thêm: Cách Cài Đặt Loa Cho Máy Tính Win7, Cách Cài Loa Cho Máy Tính Win 7

Redux-thunk được đặt trước thời gian reducer dấn request để nhận ra các action có trả về một plant object xuất xắc không, nếu đó là một plant object, Thunk đang chuyển kích hoạt đó đến Reducer như thường, nếu action trả về là một trong function, Redux Thunk vẫn “chặn” action này lại và đợi cho đến khi một lệnh asynchronous nào kia trong function trả tất với trả về kết quả.

Cài để và thông số kỹ thuật Redux-thunk

npm install redux-thunkCấu hình trong file index.js như thể như cấu hình redux, chỉ chế tạo thunk với applyMiddleware


*

Câu hỏi đưa ra là tại sao chúng ta cần dispatch lên là một trong những mộtfunction thay vì một một mộtobject ?

Giả sử ta có việc khi click vào nút button addStudent thì sau 2 giây delay mới bắt đầu tăng add student new vào table

export const addStudent = (data) => setTimeout(() => return type: "ADD_STUDENT, payload: data; , 2000);;Kết quả:

Actions must be plain objects, use custom middleware for async actions.

Do store chỉ dấn action là một trong plain object yêu cầu ta không thể tiến hành setTimeout được, vì đó họ cần redux-thunk để xử lý vụ việc này.

export const addStudent = data => return dispatch => setTimeout(() => dispatch( type: "ADD_STUDENT", payload: data );, 2000);;Tổng kết

Redux Thunk là 1 Middleware có thể chấp nhận được bạn viết những Action trả về một function thay do một plain javascript object bằng cách trì hoãn vấn đề đưa kích hoạt đến reducer.

Xem thêm: Smartsheet Là Gì ? Cách Sử Dụng Nền Tảng Hỗ Trợ Hiệu Quả 2022

Redux Thunk được thực hiện để xử lý các logic bất đồng điệu phức tạp cần truy vấn đến Store hoặc đơn giản là câu hỏi lấy dữ liệu như Ajax request.