第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

什么是mapDispatchToProps？

什么是mapDispatchToProps？

什么是mapDispatchToProps？我正在閱讀Redux庫(kù)的文檔，它有這個(gè)例子：除了讀取狀態(tài)之外，容器組件還可以調(diào)度操作。以類似的方式，您可以定義一個(gè)調(diào)用的函數(shù)mapDispatchToProps()，該函數(shù)接收該dispatch()方法并返回您想要注入演示組件的回調(diào)道具。這實(shí)際上沒(méi)有任何意義。mapDispatchToProps你已經(jīng)擁有了為什么需要mapStateToProps？他們還提供了這個(gè)方便的代碼示例：const mapDispatchToProps = (dispatch) => {   return {     onTodoClick: (id) => {       dispatch(toggleTodo(id))     }   }}有人可以用非專業(yè)人的術(shù)語(yǔ)解釋這個(gè)功能是什么以及為什么它有用？
查看完整描述

3 回答

?
拉風(fēng)的咖菲貓

TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個(gè)贊

我覺得沒(méi)有一個(gè)答案已經(jīng)明確為什么mapDispatchToProps有用。

這實(shí)際上只能在container-component模式的上下文中得到解答，我在第一次閱讀時(shí)發(fā)現(xiàn)了最好的理解：容器組件然后使用React。

簡(jiǎn)而言之，你components應(yīng)該只關(guān)心展示東西。他們應(yīng)該從中獲取信息的唯一地方是他們的道具。

與“顯示內(nèi)容”（組件）分開是：

  • 你如何得到的東西，

  • 以及你如何處理事件。

這是containers為了什么。

因此，模式中的“精心設(shè)計(jì)” component看起來(lái)像這樣：

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

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

看看這個(gè)組件如何從props（它來(lái)自redux商店mapStateToProps）獲取它顯示的信息，它還從它的props獲取其動(dòng)作函數(shù)：sendTheAlert()。

那是mapDispatchToProps進(jìn)來(lái)的地方：相應(yīng)的container

// FancyButtonContainer.jsfunction mapDispatchToProps(dispatch) {
    return({
        sendTheAlert: () => {dispatch(ALERT_ACTION)}
    })}function mapStateToProps(state) {
    return({fancyInfo: "Fancy this:" + state.currentFunnyString})}export const FancyButtonContainer = connect(
    mapStateToProps, mapDispatchToProps)(
    FancyAlerter)

我不知道你可以看到，現(xiàn)在它的container 1，它知道Redux的調(diào)度和存儲(chǔ)以及州和......東西。

該component圖案中，FancyAlerter，這并呈現(xiàn)并不需要了解任何東西：它得到它的方法在調(diào)用onClick按鈕，通過(guò)它的道具。

并且...... mapDispatchToProps是redux提供的有用手段，讓容器可以輕松地將該函數(shù)傳遞到其props上的包裝組件中。

所有這些看起來(lái)都非常像文檔中的todo示例，這里有另一個(gè)答案，但我試圖根據(jù)模式來(lái)強(qiáng)制推理它。

（注意：您不能使用mapStateToProps與mapDispatchToProps您無(wú)法訪問(wèn)dispatch內(nèi)部的基本原因相同的目的mapStateToProp。因此您不能使用mapStateToProps為包裝組件提供使用的方法dispatch。

我不知道為什么他們選擇將它分解為兩個(gè)映射函數(shù) - 讓mapToProps(state, dispatch, props) IE一個(gè)函數(shù)同時(shí)執(zhí)行它們可能更整潔！

1 請(qǐng)注意，我故意明確命名容器FancyButtonContainer，以突出它是一個(gè)“東西” - 容器的身份（因此存在！）作為“一件事”有時(shí)會(huì)在速記中丟失

export default connect(...) ????????????

大多數(shù)示例中顯示的語(yǔ)法


查看完整回答
反對(duì) 回復(fù) 2019-08-23
?
繁花如伊

TA貢獻(xiàn)2012條經(jīng)驗(yàn) 獲得超12個(gè)贊

現(xiàn)在假設(shè)有一個(gè)針對(duì)redux的動(dòng)作：

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

當(dāng)你導(dǎo)入它時(shí)，

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);

正如函數(shù)名稱所示mapDispatchToProps()，將dispatch動(dòng)作映射到props（我們組件的道具）

因此，道具onTodoClick是一種mapDispatchToProps功能的關(guān)鍵，它可以進(jìn)一步委派派遣行動(dòng)addTodo。

此外，如果您想修改代碼并繞過(guò)手動(dòng)實(shí)現(xiàn)，那么您可以這樣做，

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);

這究竟意味著什么

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


查看完整回答
反對(duì) 回復(fù) 2019-08-23
  • 3 回答
  • 0 關(guān)注
  • 1122 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)