mapDispatchToPropsとは何ですか？

私はReduxライブラリのドキュメントを読んでいましたが、次の例があります。

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

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

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

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

誰かがこの関数が何であるか、そしてなぜそれが有用であるかを素人の言葉で説明できますか？

なぜ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>
     }
}

このコンポーネントがどのようにプロップから表示する情報を取得するかを確認します（これはを介してreduxストアから取得されます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
)

ご覧いただけるかと思いますが、redux、ディスパッチ、ストア、ステートなどについて知っているのはcontainer 1つです。

componentパターン、中FancyAlerterにはでコールにそのメソッドを取得します：レンダリングがその原料のいずれかについて知る必要はありませんん、onClickボタンの、その小道具を経由して。

そして... mapDispatchToPropsは、コンテナーがその機能を小道具のラップされたコンポーネントに簡単に渡すためにreduxが提供する便利な手段でした。

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

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

彼らがなぜそれを2つのマッピング関数に分割することを選んだのか、私にはわかりません-IEにmapToProps(state, dispatch, props) 両方の機能を持たせるのは面倒だったかもしれません！

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

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

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

基本的には省略形です。だから書く必要はありません：

this.props.dispatch(toggleTodo(id));

サンプルコードに示すようにmapDispatchToPropsを使用してから、他の場所で次のように記述します。

this.props.onTodoClick(id);

この場合、より可能性が高いのは、それをイベントハンドラとして使用することです。

<MyComponent onClick={this.props.onTodoClick} />

これに関するDan Abramovの役立つビデオがあります：https : //egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist

mapStateToProps()コンポーネントが更新された状態（他のいくつかのコンポーネントによって更新される）を取得するのに役立つユーティリティです。コンポーネントが
mapDispatchToProps()アクションイベント（アプリケーションの状態の変化を引き起こす可能性のあるディスパッチアクション）を起動するのに役立つユーティリティです。

mapStateToProps、mapDispatchToPropsおよびライブラリconnectからは、ストアのおよび関数react-reduxにアクセスするための便利な方法を提供します。したがって、基本的には接続はより高次のコンポーネントです。これが意味のある場合は、ラッパーと考えることもできます。したがって、が変更されるたびに新しいが呼び出され、その後、コンポーネントを更新するとrender関数が実行されてコンポーネントがブラウザーにレンダリングされます。また、コンポーネントのKey-Valueも格納します。通常、これらは関数の形式を取ります。このように、あなたは、トリガすることができますあなたのコンポーネントからの変化を、イベントを。statedispatchstatemapStateToPropsstatepropsmapDispatchToPropspropsstateonClickonChange

ドキュメントから：

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) 

また、Reactステートレス関数と高次コンポーネントに精通していることを確認してください

mapStateToPropsstateおよびpropsを受け取り、状態から小道具を抽出してコンポーネントに渡すことができます。

mapDispatchToPropsを受け取りdispatch、propsアクション作成者をディスパッチにバインドして、結果の関数を実行するとアクションがディスパッチされるようにします。

これによりdispatch(actionCreator())、コンポーネント内で行う必要がなくなるため、読みやすくなります。

https://github.com/reactjs/react-redux/blob/master/docs/api.md#arguments

次に、次のようなreduxのアクションがあるとします。

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

インポートすると、

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

関数名が言うようにmapDispatchToProps()、dispatchアクションをプロップ（コンポーネントのプロップ）にマップします

したがって、prop onTodoClickは、mapDispatchToPropsアクションをディスパッチするように委任する機能の鍵addTodoです。

また、コードをトリムして手動実装をバイパスする場合は、これを行うことができます、

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