web-dev-qa-db-ja.com

MapDispatchToPropsとは何ですか？

私はReduxライブラリのドキュメントを読んでいました、そしてそれはこの例を持っています、

状態の読み取りに加えて、コンテナコンポーネントはアクションをディスパッチできます。同様の方法で、dispatch（）メソッドを受け取り、表示コンポーネントに注入したいコールバック小道具を返すmapDispatchToProps()という関数を定義できます。

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

彼らはまた、この便利なコードサンプルを提供します：

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

誰かが素人の言葉でこの機能が何であり、なぜそれが有用であるかを説明してもらえますか？

reactjsredux
298
Code Whisperer

なぜmapDispatchToPropsが便利なのか、答えがどれも明確になっていないように私は感じます。

これは実際にはcontainer-componentパターンの文脈でしか答えられません。

https://medium.com/@learnreact/container-components-c0e67432e005#.1a9j3w1jl

それから

http://redux.js.org/docs/basics/UsageWithReact.html

一言で言えば、あなたの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>
     }
}

このコンポーネントが（mapStateToPropsを介してreduxストアから取得した）小道具から表示する情報をどのように取得するか、またその小道具からアクション関数を取得する方法を確認します：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とdispatch、そしてstoreとstateと...について知っているのはcontainer[1]です。

レンダリングを行うcomponentというパターンの中のFancyAlerterは、そのことについて知る必要はありません。そのメソッドは、ボタンのonClickで呼び出します。

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

これらすべてはdocsのtodoの例とここでのもう一つの答えに非常に似ていますが、私は why を強調するためにパターンの観点からそれをキャストしようとしました。

（注：mapStateToProps内でmapDispatchToPropsにアクセスできないという基本的な理由から、dispatchと同じ目的でmapStateToPropを使用することはできません。したがって、mapStateToPropsを使用して、ラップされたコンポーネントにdispatchを使用するメソッドを与えることはできません。

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

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

export default connect(...)

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

507
GreenAsJade

基本的には速記です。だから書く代わりに：

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 /

65
hamstu

mapStateToProps()はあなたのコンポーネントが（他のコンポーネントによって更新される）更新された状態を得るのを助けるユーティリティです。
mapDispatchToProps()は、コンポーネントがアクションイベント（アプリケーションの状態を変化させる可能性があるアクションをディスパッチする）を起動するのを助けるユーティリティです。

45
Saisurya Kattamuri

react-reduxライブラリーのmapStateToProps、mapDispatchToProps、およびconnectは、ストアのstateおよびdispatch関数にアクセスするための便利な方法を提供します。したがって、基本的にconnectは高次コンポーネントです。これが意味を成すのであれば、ラッパーとしても使用できます。そのため、あなたのstateが変更されるたびに、mapStateToPropsがあなたの新しいstateと共に呼び出され、その後あなたがprops updateコンポーネントを呼び出すと、あなたのコンポーネントをブラウザでレンダリングするためにrender関数を実行します。 mapDispatchToPropsはあなたのコンポーネントのpropsにもKey-Valueを保存します、通常それらは関数の形を取ります。このようにして、コンポーネントのstate、onClickイベントからonChangeの変更を引き起こすことができます。

ドキュメントから：

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ステートレス関数 および - 高次コンポーネント に精通していることを確認してください。

16
Vlad Filimon

では、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())
      }
    }
}
1
Meet Zaveri

mapStateToPropsはstateとpropsを受け取り、コンポーネントを状態に渡すために状態から小道具を抽出することができます。

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

私はこれがあなたがあなたのコンポーネントの中でdispatch(actionCreator())をしなければならないことからあなたを救うだけであるのでそれを読むことをもう少し簡単にすることを見つける。

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

1
Harry Moreno