Redux là một thư viện JavaScript quản lý trạng thái (state) phổ biến, thường được sử dụng trong các ứng dụng React. Redux giúp kiểm soát trạng thái ứng dụng một cách hiệu quả và dễ dự đoán, nhất là khi ứng dụng có nhiều thành phần và tương tác phức tạp. Dưới đây là các khái niệm cơ bản về Redux:

1. Store: Store là nơi lưu trữ duy nhất cho toàn bộ trạng thái của ứng dụng. Mỗi ứng dụng chỉ có một store duy nhất.
2. Action: Action là các đối tượng JavaScript mô tả những sự kiện xảy ra trong ứng dụng, ví dụ như "người dùng nhấn nút", "thêm sản phẩm vào giỏ hàng". Mỗi action có một thuộc tính type (xác định loại hành động) và có thể có các thuộc tính bổ sung cho dữ liệu.
3. Reducer: Reducer là hàm xác định cách trạng thái của ứng dụng thay đổi dựa trên một action. Reducer nhận vào state hiện tại và action, sau đó trả về trạng thái mới.
4. Dispatch: Dispatch là phương thức dùng để gửi một action đến store. Khi bạn gọi dispatch(action), Redux sẽ chuyển action đó đến reducer để cập nhật trạng thái. - là cái có sẵn chỉ cần gọi ra const dispatch = useDispatch(); dispatch(fetchTaskRequest());

CÁC BƯỚC SETUP TRONG PROJECT: BƯỚC 1: TẠO CÁC THƯ MỤC:

BƯỚC 2: TẠO FILE PROVIDER Ở THƯ MỤC SRC ĐỂ BỌC FILE return <Provider store={store}>{children}</Provider> (children là nơi chưa ứng dụng)

BƯỚC 3: SỬ DỤNG useSelector để lấy State và useDispatch để thực hiện 1 action mục đích chung để update Sate : const { tasks, loading, error } = useSelector(state => state.task);

![image.png](<https://prod-files-secure.s3.us-west-2.amazonaws.com/827834bf-e8f7-4f12-ba10-8f0334839441/92caa17b-dc79-451f-aa2a-9a2761b62a21/image.png>)

Lợi ích của Redux

• Dễ kiểm soát và theo dõi trạng thái: Toàn bộ trạng thái ứng dụng được lưu trữ tại một nơi duy nhất, giúp dễ dàng kiểm soát và theo dõi sự thay đổi.
• Dự đoán được hành vi: Vì các thay đổi chỉ xảy ra thông qua reducer, bạn có thể dự đoán hành vi của ứng dụng một cách dễ dàng.
• Công cụ debug mạnh mẽ: Redux DevTools giúp kiểm tra và theo dõi các thay đổi của trạng thái trong quá trình phát triển.

Redux thích hợp nhất cho các ứng dụng có nhiều trạng thái và yêu cầu quản lý phức tạp. Đối với các ứng dụng nhỏ hoặc ít tương tác, Redux có thể không cần thiết.

Luồng hoạt động của Redux có thể được mô tả qua bốn bước chính, giúp xử lý và quản lý trạng thái một cách rõ ràng và có tổ chức. Dưới đây là luồng hoạt động cơ bản của Redux:

1. Action - Tạo hành động

• Một action là một đối tượng mô tả sự thay đổi cần xảy ra trong ứng dụng. Mỗi action bao gồm một thuộc tính type (xác định loại hành động) và có thể có thêm dữ liệu bổ sung để hỗ trợ thay đổi.

• Ví dụ về một action:

  javascript
  Copy code
  const addItem = (item) => ({
    type: 'ADD_ITEM',
    payload: item
  });
  
  

2. Dispatch - Gửi hành động

• Dispatch là phương thức dùng để gửi một action đến Redux store. Khi bạn muốn thực hiện một hành động nào đó trong ứng dụng (như nhấn nút), bạn sẽ gọi dispatch và truyền vào action đó.

• Ví dụ sử dụng dispatch:

  javascript
  Copy code
  dispatch(addItem({ id: 1, name: 'Sản phẩm A' }));
  
  

3. Reducer - Xử lý thay đổi trạng thái

• Khi một action được dispatch, reducer sẽ nhận vào action này cùng với trạng thái hiện tại của ứng dụng để xác định trạng thái mới.