Với function connect của react-redux, ta có thể kết nối redux store của chugns ta đến một component

connect(mapStateToProps, mapDispatchToProps)(MyComponent)

Bài viết này sẽ cung cấp 5 cách để xác định mapDispatchToProps

Bài toán

Đoạn code dưới đây sẽ là bài toán mà ta sẽ tìm hiểu lần này. Đây là một ví dụ đơn giản với 2 action sendMessage & deleteMessage

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { sendMessage, deleteMessage } from './actions'
class ChatComponent extends Component {
  handleSend = message => {
    this.props.sendMessage(message)
  }
  handleDelete = id => {
    this.props.deleteMessage(id)
  }
  render() {
    // ...
  }
}
const mapStateToProps = state => state
// ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽ ▽
const mapDispatchToProps = /* this part is to be discussed */
// △ △ △ △ △ △ △ △ △ △
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(ChatComponent)

1. Wrap into Dispatch Manually

const mapDispatchToProps = dispatch => ({
  sendMessage: message => dispatch(sendMessage(message)),
  deleteMessage: id => dispatch(deleteMessage(id)),
})

2. Wrap into Dispatch Automatically with Connect

Trích từ document của hàm connect

mapDispatchToProps [...] Nếu một object được truyền, mỗi functio bên trong nó sẽ được coi như là một Redux action creator. Một object với cùng tên function nhưng với mỗi action creator được gói vào bên trong 1 dispatch call. Vì thế nên chúng có thể gọi trực tiếp & sẽ được merge vào bên trong props của component

Nó có nghĩa là chúng ta không phỉa gửi những action của mình, chỉ cần truyền một object vào connect và chugns ta có thể gọi những action đã được đóng gói đó từ props

Example:

const mapDispatchToProps = {
  sendMessage, // will be wrapped into a dispatch call
  deleteMessage, // will be wrapped into a dispatch call
};

3. Use bindActionCreators

Trích từ document của redux

bindActionCreators: Biến một object có values thành action creators thành một đối tượng có cùng khóa, nhưng với mỗi action creator sẽ được đóng gói vào một dispatch call để chúng có thể gọi trực tiếp

import { bindActionCreators } from 'redux'
// ...
const mapDispatchToProps = dispatch => bindActionCreators(
  {
    sendMessage,
    deleteMessage,
  },
  dispatch,
)

4. Use bindActionCreators and Extend the Props

import { bindActionCreators } from 'redux'
// ...
const mapDispatchToProps = dispatch => ({
  ...bindActionCreators(
    {
      sendMessage,
      deleteMessage,
    },
    dispatch,
  ),
  otherService, // this is not to be wrapped into dispatch
})

5. Wrap into Dispatch Automatically

Phần này là khá giống với #2

import * as messageActions from './messageActions'
import * as userActions from './userActions'
// ...
const mapDispatchToProps = {
  ...messageActions,
  ...userActions,
};

Reference document

https://blog.benestudio.co/5-ways-to-connect-redux-actions-3f56af4009c8