Dispatch Redux là gì

Redux nổi lên trong vòng 2 năm nay như 1 hiện tượng, nó thậm chí thay thế luôn kiến trúc Flux của Facebook dùng cho React, và hiện tại Facebook cũng khuyến cáo dev chuyển qua dùng Redux vì nhiều ưu điểm được cải tiến từ Flux.

Mặc dù nó ko còn tính thời sự như hơn 1 năm trước nhưng mình vẫn quyết định viết series Redux để giúp các bạn mới học React và Redux tiếp cận dễ dàng hơn.

Đăng ký email tại đây để nhận được bài viết về công nghệ và khởi nghiệp của Innovatube hàng tuần.

Series gồm 3 phần:

Phần 1: Nguyên lý cơ bản của Redux

Phần 2: Cài đặt và sử dụng với React Native

Phần 3: Redux-middleware [Thunk, Saga, Observable] nên dùng cái nào?

Mời các bạn đón đọc!

Trong Redux action là 1 pure object định nghĩa 2 thuộc tính là : type: kiểu mô tả action, và payload: giá trị tham số truyền lên

{
type: "KIEU_ACTION",
payload: //tham số
}

Action có nhiệm vụ mô tả những gì xảy ra nhưng lại không chỉ rõ phần state nào của response thay đổi -> Việc này sẽ là của Reducer đảm nhiệm:

Reducer nhận 2 tham số vào: 1 state cũ và action được gửi lên sau đó trả ra một state mới, ko làm thay đổi state cũ.

[previousState, action] => newState

Store là 1 object lưu trữ state của toàn bộ ứng dụng có 3 phương thức sau:

• getState[]: Giúp lấy ra state hiện tại
• dispatch[action]: Thực hiện gọi 1 action
• subscrible[listener]:Nó có vai trò cực quan trọng, luôn luôn lắng nghe xem có thay đổi gì ko rồi ngay lập tức cập nhật ra View

Để cho dễ hiểu hơn mình sẽ minh họa bằng ví dụ sau:

Ta có 1 reducer, khở tạo store thông qua hàm createStore[reducer], trong Redux.

Phân tích vị dụ trên ta có:

• Step 1: Khởi tạo store cho project mà nó nhận tham số đầu vào là reducer counter ở trên:

const store = createStore[counter];

• Step 2: Sau đó giả sử ta muốn tăng giá trị lên 1 thì call action với type là INCREMENT dùng hàm dispatch[] của store:

document.addEventListener['click', [] => {
store.dispatch[{type:"INCREMENT"}];
}];

• Step 3: lúc này là nhệm vụ của reducer, sẽ xem kiểu action gọi lên là gì INCREMENT hay DECREMENT để nó return ra 1 new state cụ thể ở đây là state + 1.
• Step 4: thằng subcrible[] trong store sẽ làm nhiệm vụ cập nhật tình hình thay đổi ra View:

store.subcrible[[] => {
document.body.innerText = store.getState[];
}];

Đến đây thì cơ bản bạn đã nắm được nguyên lý hoạt động cơ bản nhất của Redux mà tôi tạm rút gọn lại flow là:

action -> reducer -> store -> View

5. Tóm lại

Ở phạm vi bài này mình đã trình bày nguyên lý cơ bản và cách thức hoạt động của Redux để các bạn có thể nắm được cũng như hình dung nó sinh ra để làm việc gì, bài viết mới thể hiện được các tình huống đơn giản nhất thông qua ví dụ đơn giản, còn trong khi làm dự án thực tế công việc chủ yếu là tương tác với server [fetch data] và xử lý data sau đó, thì đó là về bất đồng bộ asynchronous và xử lý side-effect sau mỗi action được gọi.

Việc này sẽ được Redux xử lý với Redux-middleware

Trước khi dùng được middleware, chúng ta sẽ cùng cài đặt và sử dụng với React Native ở phần 2: Redux + React Native

6. Nguồn tham khảo:

Đăng ký email tại đây để nhận được bài viết về công nghệ và khởi nghiệp của Innovatube hàng tuần.