Tớ đã ăn hành với Redux như thế nào?

Tớ đã ăn hành với Redux như thế nào?

Ngày 7 tháng 9 năm 2018Để sẵn sàng chuẩn bị cho công cuộc phỏng vấn vì miếng ăn, tớ phải tranh thủ tìm hiểu và khám phá React và những công nghệ tiên tiến tương quan, trong đó có Redux. Đường cách mạng còn lắm khó khăn, đọc document của nó éo hiểu gì hết. Hôm nay san sẻ với mọi người cách tiếp cận Redux .thumbnails

Đặt vấn đề

Khi lập trình React, điều đầu tiên bực bội nhất là việc quản lý State. Như hình phía trên, để truyền dữ liệu giữa các component khá là lằng nhằng do chỉ truyền được cho component kề nhau. Do đó, cần có một cơ chế để quản lý state riêng biệt.

Giải pháp

Ok, dễ nhất thì ta cứ xem state như biến toàn cục, khi cần thì viết Get/Set bình thường. Tớ có nghĩ đến localStorage. Tuy nhiên cách này khá bưởi, bạn có thể xem thêm tại đây.
Please Stop Using Local Storage

Thử cách khác, ta hỏi chị Google. Kết quả là ta được 2 giải pháp đó là Flux và Redux. Về phần Flux, ta có thể xem bài tutorial sau đây là hình dung được tư tưởng. Còn Redux, nó khá là hại não.
Xem bài Hướng dẫn và giải thích Flux bằng hình vẽ

Redux

Giờ mới là phần chính. Ta thử vào xem trang chủ của Redux tại https://redux.js.org xem có hiểu gì không nhé. Chắc cú là không dành cho beginner rồi. Tớ phải xem bài viết React Redux Tutorial for Beginners : The Definitive Guide ( 2018 ) mới tưởng tượng được Redux như thế nào .Về cơ bản, Redux là một thư viện quản trị state, nó độc lập với React. Do đó, Redux hoàn toàn có thể sử dụng chung với những thư viện khác vẫn được .Các thành phần cơ bản của Redux gồm có :

  • Store – Nơi lưu trữ state
  • Actions – Các hành động truyền dữ liệu được gởi từ ứng dụng đến Store
  • Reducer – Xác định cách thay đổi State

Redux flow

Ăn hành

Bây giờ tớ sẽ minh hoạ cho các bạn hiểu cách chạy bình thường của Redux nhé. Lúc này, ta chỉ đụng mỗi Redux thôi.

InitialĐầu tiên, Reducer sẽ khởi tạo State và cách xác lập đổi khác State. Sau đó, khởi tạo Store bằng Reducer đã khởi tạo trước đó. Lúc này, ta khai báo tiếp hành vi .Quá trình khởi tạo đã hoàn tất, ta khởi tạo tiếp một chút ít để mở màn test .Bây giờ, bạn thử chạy đoạn code dưới đây ở Developer Tool .Running ReduxNhư bạn đã thấy, phía Store sẽ dispatch thằng ku Actions là State được đổi khác rồi. Như thế, ta hoàn toàn có thể cho State tách biệt khỏi mớ Components .

Ăn hành cùng với React

Ban đầu tớ nghĩ tất cả chúng ta hoàn toàn có thể import Store vào nơi cần gọi là được. Nhưng giang hồ dùng chiêu thức khác, họ mapping State của Components với State của Store. Thặc vi diệu ! ! !

Để triển được chiêu thức đó, ta cần cài thêm package react-redux. Ghi nhớ khẩu quyết của chiêu thức này.

  • mapStateToProps – dùng để map State của Component với State trong Store của Redux
  • mapDispatchToProps – dùng để map method của Component với lời gọi action từ Store tới Actions của Redux

Sau đây là cách sử dụng.

Chốt hạ

Hy vọng với cách trình diễn của mình, những bạn tưởng tượng được tư tưởng của Redux, cách dùng Redux với React như thế nào .

Tham khảo

Related Posts

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *