[解決済み] mapDispatchToPropsとは何ですか？

質問

Reduxライブラリのドキュメントを読んでいたら、こんな例が載っていました。

コンテナ・コンポーネントは、状態を読み取るだけでなく、アクションをディスパッチすることもできます。これと同様に mapDispatchToProps() を受信し dispatch() メソッドを呼び出し、プレゼンテーショナルコンポーネントに注入したいコールバックプロップスを返します。

これは実は意味がないんです。なぜ mapDispatchToProps すでに mapStateToProps ?

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

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

この機能とは何ですか、なぜ便利なのですか？

どのように解決するのですか？

どの答えも、なぜそうなるのかが明確でない気がします。 mapDispatchToProps は有用です。

という文脈でしか答えられません。 container-component というパターンがありますが、これは一読していただくのが一番わかりやすいと思います。 コンテナ部品 次に Reactでの使用方法 .

一言で言えば、あなたの components は、物を表示することだけに関係するはずです。 その 情報を取得するのはプロップスだけです。 .

"表示するもの"（コンポーネント）から分離されるのは。

• どのように表示させるか。
• と、イベントの処理方法です。

それが containers はそのためのものです。

したがって、"well designed" 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からどのように取得しているかを見てみましょう。 mapStateToProps また、アクション関数もプロップスから取得します。 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 1 は、reduxやディスパッチ、ストア、ステート、...などについて知っています。

その component をパターンの中に入れてください。 FancyAlerter で呼び出されるメソッドを取得します。 onClick のプロップスを通じて、ボタンの

そして ... mapDispatchToProps は、コンテナがラップされたコンポーネントのpropsにその関数を簡単に渡せるようにする、reduxが提供する便利な手段でした。

これは、docsのtodoの例や、ここでの別の回答に非常に似ていますが、私はそれを強調するために、パターンの光の中に投げてみました。 なぜ .

(注意) mapStateToProps と同じ目的で使用されます。 mapDispatchToProps にアクセスできない、という基本的な理由からです。 dispatch 内部 mapStateToProp . そのため mapStateToProps を使用するメソッドをラップされたコンポーネントに与えることができます。 dispatch .

なぜ2つのマッピング関数に分割したのか、その理由はわかりません。 mapToProps(state, dispatch, props) IE1つの関数で両方できる

1 意図的にコンテナの名前を明示したことに注意してください。 FancyButtonContainer これは、コンテナが「モノ」であることを強調するためのものです。

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

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