MapDispatchToProps là gì?

Tôi đang đọc tài liệu cho thư viện Redux và nó có ví dụ sau:

Ngoài việc đọc trạng thái, các thành phần vùng chứa có thể gửi các hành động. Theo cách tương tự, bạn có thể xác định một hàm được gọi mapDispatchToProps()để nhận dispatch()phương thức và trả về các đạo cụ gọi lại mà bạn muốn đưa vào thành phần trình bày.

Điều này thực sự không có ý nghĩa. Tại sao bạn cần mapDispatchToPropskhi bạn đã có mapStateToProps?

Họ cũng cung cấp mẫu mã tiện dụng này:

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

Ai đó có thể vui lòng giải thích theo thuật ngữ của giáo dân chức năng này là gì và tại sao nó lại hữu ích không?

Tôi cảm thấy như không có câu trả lời nào kết tinh tại sao lại mapDispatchToPropshữu ích.

Điều này thực sự chỉ có thể được trả lời trong ngữ cảnh của container-componentmẫu mà tôi thấy hiểu rõ nhất khi đọc lần đầu: Thành phần vùng chứa rồi đến Cách sử dụng với React .

Tóm lại, bạn componentsđược cho là chỉ quan tâm đến việc hiển thị nội dung. Nơi duy nhất họ phải lấy thông tin là đạo cụ của họ .

Được tách biệt với "nội dung hiển thị" (thành phần) là:

• làm thế nào bạn có được những thứ để hiển thị,
• và cách bạn xử lý các sự kiện.

Đó là những gì containersdành cho.

Do đó, "được thiết kế tốt" componenttrong mẫu trông như thế này:

class FancyAlerter extends Component {
    sendAlert = () => {
        this.props.sendTheAlert()
    }

    render() {
        <div>
          <h1>Today's Fancy Alert is {this.props.fancyInfo}</h1>
          <Button onClick={sendAlert}/>
        </div>
     }
}

Xem cách thành phần này được các thông tin nó sẽ hiển thị từ đạo cụ (mà đến từ các cửa hàng Redux qua mapStateToProps) và nó cũng được chức năng hoạt động của nó từ đạo cụ của nó: sendTheAlert().

Đó là nơi mapDispatchToPropsxuất hiện: trongcontainer

// FancyButtonContainer.js

function mapDispatchToProps(dispatch) {
    return({
        sendTheAlert: () => {dispatch(ALERT_ACTION)}
    })
}

function mapStateToProps(state) {
    return({fancyInfo: "Fancy this:" + state.currentFunnyString})
}

export const FancyButtonContainer = connect(
    mapStateToProps, mapDispatchToProps)(
    FancyAlerter
)

Tôi tự hỏi nếu bạn có thể thấy, bây giờ nó là người đầu container tiên biết về redux và công văn và lưu trữ và trạng thái và ... mọi thứ.

Trong componentmô hình, FancyAlerterthứ mà việc kết xuất không cần biết về bất kỳ thứ nào trong số đó: nó nhận được phương thức của nó để gọi đến onClicknút, thông qua các đạo cụ của nó.

Và ... mapDispatchToPropslà phương tiện hữu ích mà redux cung cấp để cho phép vùng chứa dễ dàng chuyển hàm đó vào thành phần được bao bọc trên đạo cụ của nó.

Tất cả điều này trông rất giống với ví dụ todo trong tài liệu và một câu trả lời khác ở đây, nhưng tôi đã cố gắng đưa nó vào ánh sáng của mẫu để nhấn mạnh lý do .

(Lưu ý: bạn không thể sử dụng mapStateToPropscho cùng mục đích vì mapDispatchToPropslý do cơ bản là bạn không có quyền truy cập vào dispatchbên trong mapStateToProp. Vì vậy, bạn không thể sử dụng mapStateToPropsđể cung cấp cho thành phần được bọc một phương thức sử dụng dispatch.

Tôi không biết tại sao họ lại chọn chia nó thành hai chức năng ánh xạ - có thể gọn gàng hơn khi mapToProps(state, dispatch, props) IE có một chức năng để làm cả hai!

1 Lưu ý rằng tôi đã cố tình đặt tên rõ ràng cho vùng chứa FancyButtonContainer, để làm nổi bật rằng nó là một "vật" - danh tính (và do đó tồn tại!) Của vùng chứa là "một thứ" đôi khi bị mất trong cách viết tắt

export default connect(...) ⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀

cú pháp được hiển thị trong hầu hết các ví dụ

Về cơ bản nó là một tốc ký. Vì vậy, thay vì phải viết:

this.props.dispatch(toggleTodo(id));

Bạn sẽ sử dụng mapDispatchToProps như được hiển thị trong mã ví dụ của bạn và sau đó viết ở nơi khác:

this.props.onTodoClick(id);

hoặc nhiều khả năng hơn trong trường hợp này, bạn có điều đó làm trình xử lý sự kiện:

<MyComponent onClick={this.props.onTodoClick} />

Có một video hữu ích của Dan Abramov về điều này ở đây: https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist

mapStateToProps()là một tiện ích giúp thành phần của bạn có được trạng thái cập nhật (được cập nhật bởi một số thành phần khác),
mapDispatchToProps()là một tiện ích sẽ giúp thành phần của bạn kích hoạt một sự kiện hành động (điều phối hành động có thể gây ra thay đổi trạng thái ứng dụng)

mapStateToProps, mapDispatchToPropsvà connecttừ react-reduxthư viện cung cấp một cách thuận tiện để truy cập statevà dispatchchức năng của cửa hàng của bạn. Vì vậy, về cơ bản kết nối là một thành phần có thứ tự cao hơn, bạn cũng có thể coi như một trình bao bọc nếu điều này hợp lý với bạn. Vì vậy, mỗi khi statethay đổi của bạn mapStateToPropssẽ được gọi với thành phần mới của bạn statevà sau đó khi bạn propscập nhật thành phần sẽ chạy chức năng kết xuất để hiển thị thành phần của bạn trong trình duyệt. mapDispatchToPropscũng lưu trữ các khóa-giá trị trên propsthành phần của bạn, thông thường chúng có dạng một hàm. Bằng cách đó, bạn có thể kích hoạt statethay đổi từ thành phần onClick, onChangesự kiện của mình.

Từ tài liệu:

const TodoListComponent = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => onTodoClick(todo.id)}
      />
    )}
  </ul>
)

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
}

function toggleTodo(index) {
  return { type: TOGGLE_TODO, index }
}

const TodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList) 

Ngoài ra, hãy đảm bảo rằng bạn đã quen thuộc với các hàm không trạng thái của React và các Thành phần bậc cao hơn

mapStateToPropsnhận statevà propsvà cho phép bạn trích xuất các đạo cụ từ trạng thái để chuyển cho thành phần.

mapDispatchToPropsnhận dispatchvà propsvà dành cho bạn để ràng buộc người tạo hành động gửi đi để khi bạn thực thi hàm kết quả, hành động sẽ được gửi đi.

Tôi thấy điều này chỉ giúp bạn không phải thực hiện dispatch(actionCreator())trong thành phần của mình, do đó làm cho nó dễ đọc hơn một chút.

https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments

Bây giờ, giả sử có một hành động cho redux như:

export function addTodo(text) {
  return {
    type: ADD_TODO,
    text
  }
}

Khi bạn nhập nó,

import {addTodo} from './actions';

class Greeting extends React.Component {

    handleOnClick = () => {
        this.props.onTodoClick(); // This prop acts as key to callback prop for mapDispatchToProps
    }

    render() {
        return <button onClick={this.handleOnClick}>Hello Redux</button>;
    }
}

const mapDispatchToProps = dispatch => {
    return {
      onTodoClick: () => { // handles onTodoClick prop's call here
        dispatch(addTodo())
      }
    }
}

export default connect(
    null,
    mapDispatchToProps
)(Greeting);

Như tên hàm đã nói mapDispatchToProps(), ánh xạ dispatchhành động với đạo cụ (đạo cụ của thành phần của chúng tôi)

Vì vậy, prop onTodoClicklà một chìa khóa để thực hiện mapDispatchToPropschức năng mà ủy quyền cho hành động addTodo.

Ngoài ra, nếu bạn muốn cắt bớt mã và bỏ qua việc triển khai thủ công, thì bạn có thể làm điều này,

import {addTodo} from './actions';
class Greeting extends React.Component {

    handleOnClick = () => {
        this.props.addTodo();
    }

    render() {
        return <button onClick={this.handleOnClick}>Hello Redux</button>;
    }
}

export default connect(
    null,
    {addTodo}
)(Greeting);

Chính xác nghĩa là

const mapDispatchToProps = dispatch => {
    return {
      addTodo: () => { 
        dispatch(addTodo())
      }
    }
}