MapDispatchToProps là gì?

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

Ngoài việc đọc trạng thái, các thành phần container có thể gửi các hành động. Theo cách tương tự, bạn có thể định nghĩa một hàm được gọi là 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 trong điều khoản của giáo dân về chức năng này là gì và tại sao nó hữu ích?

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 rõ nhất khi đọc lần đầu: Thành phần Container sau đó là 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ọ có nghĩa vụ phải lấy thông tin là đạo cụ của họ .

Tách từ "hiển thị công cụ" (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 đó, một "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 nhận thông tin mà nó hiển thị từ các đạo cụ (xuất phát từ cửa hàng redux thông qua mapStateToProps) và nó cũng có chức năng hành động từ các đạo cụ của nó : sendTheAlert().

Đó là nơi mapDispatchToPropsđến: trong tương ứngcontainer

// 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ể nhìn thấy, bây giờ đó là container 1 người biết về redux, công văn và lưu trữ và trạng thái và ... công cụ.

Trong componentmẫu, FancyAlerterkết xuất đồ họa không cần biết về bất kỳ thứ gì trong số đó: nó có phương thức gọi 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 container dễ dàng chuyển chức năng đó vào thành phần được bọc trên các đạo cụ của nó.

Tất cả điều này trông rất giống ví dụ việc cần làm 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ó ra dưới ánh sáng của mẫu để nhấn mạnh lý do tại sao .

(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 bao bọc một phương thức sử dụng dispatch.

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

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

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 trong trường hợp này, bạn sẽ có điều đó với tư cách là người 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 tại đâ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à tiện ích giúp thành phần của bạn kích hoạt sự kiện hành động (gửi hành động có thể gây 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 của bạn 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 bậc cao hơn, bạn cũng có thể nghĩ như một trình bao bọc nếu điều này có ý nghĩa với bạn. Vì vậy, mỗi khi statethay đổi của bạn mapStateToPropssẽ được gọi với mới statevà sau đó khi bạn propscập nhật thành phần sẽ chạy chức năng kết xuất để kết xuất thành phần của bạn trong trình duyệt. mapDispatchToPropscũng lưu trữ các giá trị khóa trên propsthành phần của bạn, thông thường chúng có dạng hàm. Theo cách đó, bạn có thể kích hoạt statethay đổi từ thành phần onClick, onChangesự kiện của bạn .

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) 

Đồng thời đảm bảo rằng bạn đã quen thuộc với các hàm không trạng thái React và các thành phần bậc cao

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

mapDispatchToPropsnhận dispatchvà propscó nghĩa là để bạn ràng buộc người tạo hành động gửi đi để khi bạn thực thi chức năng 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 làm 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#argument

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 mapDispatchToProps(), bản đồdispatch hành động tới đạo cụ (đạo cụ thành phần của chúng tôi)

Vì vậy, prop onTodoClicklà một chìa khóa để mapDispatchToPropshoạt động mà đại biểu tiếp tục gửi hành động addTodo.

Ngoài ra nếu bạn muốn cắt mã và bỏ qua việc thực hiện 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);

Nghĩa là chính xác

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