mapDispatchToProps là gì?

mapDispatchToProps là một tham số tùy chọn trong hàm connect() của thư viện React Redux. Nó cho phép bạn chỉ định cách các action creator được ánh xạ tới props của component. Nói cách khác, mapDispatchToProps định nghĩa làm thế nào component có thể kích hoạt các thay đổi trạng thái trong Redux store.

mapDispatchToProps có thể là một object hoặc một function.

Khi mapDispatchToProps là một object:

Mỗi thuộc tính của object đại diện cho một action creator. React Redux sẽ tự động sử dụng bindActionCreators() để liên kết mỗi action creator với hàm dispatch(), sau đó truyền chúng làm props cho component. Ví dụ:

const mapDispatchToProps = {
  increment: () => ({ type: 'INCREMENT' }),
  decrement: () => ({ type: 'DECREMENT' })
};

Trong ví dụ này, component sẽ nhận được hai props: increment và decrement. Khi gọi this.props.increment(), action { type: 'INCREMENT' } sẽ được dispatch tới store.

Hình ảnh minh họa: Sơ đồ cấu trúc thư mục của một ứng dụng React Redux, thể hiện mối quan hệ giữa các components, containers, actions và reducers.

Khi mapDispatchToProps là một function:

Function này nhận dispatch làm tham số và trả về một object. Object này ánh xạ các props của component tới các hàm dispatch action. Điều này cho phép bạn tùy chỉnh cách dispatch action và truyền thêm tham số nếu cần. Ví dụ:

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
    incrementByAmount: (amount) => dispatch({ type: 'INCREMENT_BY_AMOUNT', payload: amount })
  };
};

Với cách này, bạn có thể kiểm soát hoàn toàn việc dispatch action. Ví dụ, incrementByAmount cho phép bạn dispatch action với một payload (giá trị bổ sung).

mapDispatchToProps giúp đơn giản hóa việc kết nối component với Redux store. Nó cho phép bạn viết code rõ ràng hơn và dễ dàng kiểm tra hơn bằng cách tách biệt logic xử lý action khỏi component. Bằng cách sử dụng mapDispatchToProps, component của bạn chỉ cần quan tâm đến việc hiển thị dữ liệu và gọi các props được cung cấp để thay đổi trạng thái, mà không cần biết chi tiết về cách thức dispatch action.

Hình ảnh minh họa: Luồng dữ liệu trong Redux, cho thấy cách action được dispatch và reducers cập nhật state, liên quan đến chức năng của mapDispatchToProps trong việc kết nối components với store.

Nếu không sử dụng mapDispatchToProps, component sẽ nhận được dispatch làm prop. Tuy nhiên, việc sử dụng mapDispatchToProps giúp code dễ đọc và bảo trì hơn, đặc biệt là khi bạn có nhiều action creators. Nó cũng giúp bạn tận dụng tối đa tính năng của bindActionCreators để tối ưu hiệu năng.