MapDispatchToProps là gì?

374
Code Whisperer 2016-09-10 10:26.

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?

6 answers

603
GreenAsJade 2016-10-16 22:00.

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ụ

86
hamstu 2016-09-10 10:47.

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

60
Saisurya Kattamuri 2017-03-03 20:32.

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)

24
Vlad Filimon 2016-09-10 21:43.

mapStateToProps, mapDispatchToPropsconnecttừ react-reduxthư viện cung cấp một cách thuận tiện để truy cập statedispatchchứ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 Reactcác Thành phần bậc cao hơn

4
Harry Moreno 2016-09-10 10:52.

mapStateToPropsnhận statepropsvà 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 dispatchpropsvà 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

4
Meet Zaveri 2019-04-03 00:10.

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())
      }
    }
}

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Một thương hiệu kế thừa khác có được cuộc sống mới khi những người chủ mới của Black Opal có được Hội chợ thời trang

Một thương hiệu kế thừa khác có được cuộc sống mới khi những người chủ mới của Black Opal có được Hội chợ thời trang

Desiree Rogers, trái, và Cheryl Mayberry McKissack Chuyển sang, Fenty Beauty và Pat McGrath, có một đế chế làm đẹp mới do phụ nữ làm chủ đang trỗi dậy. Sau thương vụ mua lại mỹ phẩm Black Opal vào tháng 9, đội ngũ quyền lực của Giám đốc điều hành công ty Desiree Rogers và Chủ tịch Cheryl Mayberry McKissack đã thông báo mua lại thương hiệu làm đẹp tiên phong Fashion Fair từ người sáng lập Johnson Publishing Company (JPC).

Ngoài việc trở nên vô nghĩa, các bên bộc lộ giới tính giờ đây đã trở nên chết người

Ngoài việc trở nên vô nghĩa, các bên bộc lộ giới tính giờ đây đã trở nên chết người

Đối với những người có quá nhiều thời gian, tiệc tiết lộ giới tính là một cách thú vị để không cần áp đặt những định kiến ​​hạn chế lên thai nhi trước một đối tượng bạn bè giả vờ quan tâm một cách lịch sự. Tuy nhiên, việc chỉ dựa vào những chiếc bánh nướng có màu nhân tạo để biểu thị một tiếng hoo-ha hoặc một đứa trẻ đi tè đã trở nên xa xỉ trong các bậc cha mẹ trên Instagram.

Kirstjen Nielsen đang cố gắng đổi mới bản thân với tư cách là một người phụ nữ 'nói ra sự thật cho sức mạnh'

Kirstjen Nielsen đang cố gắng đổi mới bản thân với tư cách là một người phụ nữ 'nói ra sự thật cho sức mạnh'

Hôm thứ Tư, cựu Bộ trưởng An ninh Nội địa Kirstjen Nielsen vì một lý do nào đó đã được đưa ra một diễn đàn để phát biểu tại Hội nghị thượng đỉnh Những người phụ nữ quyền lực nhất của Fortune. Và có thể đoán trước được, người phụ nữ giám sát các nỗ lực (đang diễn ra) của chính quyền Trump nhằm chia cắt các gia đình ở biên giới đã sử dụng thời gian của mình như một cơ hội để tự bảo vệ mình và tự nhận mình là người — và hãy hít thở sâu ở đây — “đã nói sự thật với quyền lực.

Toyota Racing Development sẽ cho ra mắt Supra 3000GT Concept, Massive Wing vào tháng tới

Toyota Racing Development sẽ cho ra mắt Supra 3000GT Concept, Massive Wing vào tháng tới

Vì thế hệ mới nhất của chiếc xe điều chỉnh được yêu thích trên thế giới hiện đã có mặt tại đây, nên chỉ có điều kiện là Toyota Racing Development sẽ đưa phiên bản Supra thế hệ thứ năm sửa đổi của riêng mình đến SEMA vào tháng tới. Toyota đã cho chúng tôi một gợi ý về những gì sẽ xảy ra trong tuần này: một chiếc Concept GR Supra 3000GT hiện đại.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language