Bài đăng

Đang hiển thị bài đăng từ Tháng 8, 2019

Redux: Ví dụ Counter

Hình ảnh
Sau khi có các kiến thức cơ bản về Redux như store, action, reducer, provider... Để tổng hợp các kiến thức đã học chúng ta cùng bắt tay vào làm ví dụ về Counter. Counter đơn giản chúng ta có hai nút bấm: Khi click vào nút (+) thì giá trị trong ô input sẽ tăng Khi click vào nút (-) thì giá trị ô input sẽ giảm  Trong bài viết này chúng ta cùng xây dựng Counter với React React + Redux 1. Counter với React Chúng ta sẽ xây dựng ví dụ đơn giản thông qua React và từng bước thêm Redux vào để có thể dễ hiểu hơn Redux hoạt động như nào nhé. Sau khi cài đặt, chúng ta tạo một file Counter.js với code như sau: Giải thích nhanh về đoạn code trên: Biến count sẽ được khởi tạo và lưu trữ trong state ngay ở đầu Counter component Khi người dùng click vào "+" thì sự kiện onClick() sẽ được gọi, cụ thể function increment() sẽ được thực thi. Increment() sẽ cập nhật state với một count mới. Tương tự khi người dùng click vào "-". Bởi vì state bị thay đổi nên React sẽ r