☰

mapDispatchToPropsとは何ですか? 質問する

tag-icon • tag-icon reactjs redux react-redux mapdispatchtoprops
mapDispatchToPropsとは何ですか? 質問する

Redux ライブラリのドキュメントを読んでいたところ、次のような例がありました。

コンテナ コンポーネントは、状態を読み取るだけでなく、アクションをディスパッチすることもできます。同様に、メソッドmapDispatchToProps()を受け取りdispatch()、プレゼンテーション コンポーネントに挿入するコールバック プロパティを返す という関数を定義できます。

mapDispatchToPropsこれは実際には意味がありません。すでに持っているのに、なぜ必要なのですかmapStateToProps?

また、この便利なコードサンプルも提供されています:

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

この機能とは何ですか? また、なぜ便利なのですか?

ベストアンサー1

いずれの答えも、なぜmapDispatchToPropsそれが役に立つのかを明確にしていないように感じます。

この質問に対する答えは、パターンのコンテキストでのみ得ることができますがcontainer-component、まずは以下を読んで理解するのが一番です。コンテナコンポーネントそれからReactでの使用。

簡単に言えば、あなたはcomponents表示することだけを気にするべきです。彼らが情報を取得する唯一の場所は、彼らの小道具です。

「表示するもの」（コンポーネント）から分離されるのは次の通りです。

  • どのように表示するか、
  • イベントをどのように処理するか。

それが私たちcontainersの目的です。

したがって、「適切に設計された」componentパターンは次のようになります。

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

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

このコンポーネントが、表示する情報を props ( 経由で redux ストアから取得mapStateToProps) から取得する方法と、アクション関数を props から取得する方法を確認しますsendTheAlert()。

ここでmapDispatchToProps登場するのが、対応するcontainer

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

あなたにはそれがわかるだろうか、今それがcontainer 1redux や dispatch や store や state などについて知っているもの。

componentパターン内の はレンダリングFancyAlerterを行うため、これらのことについて何も知る必要はありません。 は、onClickボタンの を呼び出すメソッドをそのプロパティ経由で取得します。

そして...は、mapDispatchToPropsコンテナがその関数をそのプロパティのラップされたコンポーネントに簡単に渡すことができるようにするために、Redux が提供する便利な手段でした。

これらはすべて、ドキュメントの todo の例や、ここにある別の回答と非常によく似ていますが、私はその理由を強調するために、パターンに照らしてそれを表現しようとしました。

(注:内部では にアクセスできないという基本的な理由により、 をmapStateToPropsと同じ目的で使用することはできません。したがって、を使って、ラップされたコンポーネントに を使用するメソッドを提供することはできません。mapDispatchToPropsdispatchmapStateToPropmapStateToPropsdispatch

なぜ 2 つのマッピング関数に分割することにしたのかはわかりません。IEmapToProps(state, dispatch, props)の 1 つの関数で両方を実行した方がすっきりしたかもしれません。

1コンテナFancyButtonContainerを「物」であることを強調するために意図的に明示的に と名付けたことに注意してください。コンテナの「物」としてのアイデンティティ（したがって存在！）は、省略形では失われることがあります。

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

ほとんどの例で示されている構文

おすすめ記事