409

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

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

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

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

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

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

4

6 に答える 6

635

mapDispatchToPropsなぜ有用なのか、答えのどれも結晶化していないように感じます。

これは実際には、container-componentパターンのコンテキストでのみ答えることができます。最初に読むことで最もよく理解できることがわかりました:コンテナー コンポーネント次にReact での使用法。

一言で言えば、あなたcomponentsはものを表示することだけに関心があるはずです. 彼らが情報を得る唯一の場所は propsです。

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

  • 表示するものを取得する方法、
  • イベントの処理方法。

それ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
)

redux、dispatch、store、state などを知っているのはcontainer 1人なので、お分かりいただけたでしょうか。

componentレンダリングを行うパターンのはFancyAlerter、そのようなことを知る必要はありませんonClick。小道具を介して、ボタンので呼び出すメソッドを取得します。

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

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

(注: insideにアクセスできないという基本的な理由とmapStateToProps同じ目的で を使用することはできません。そのため、ラップされたコンポーネントに. mapDispatchToPropsdispatchmapStateToPropmapStateToPropsdispatch

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

1FancyButtonContainer「物」であることを強調するために、 意図的に明示的にコンテナに名前を付けたことに注意してください。

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

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

于 2016-10-16T08:00:55.563 に答える
64

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

于 2017-03-03T06:32:30.087 に答える
26

mapStateToProps、mapDispatchToPropsおよびconnectfrom library は、ストアの機能react-reduxにアクセスするための便利な方法を提供します。したがって、基本的に接続は高次のコンポーネントであり、これが理にかなっている場合はラッパーと考えることができます。したがって、変更されるたびに new が呼び出され、その後コンポーネントを更新すると render 関数が実行され、ブラウザでコンポーネントがレンダリングされます。コンポーネントの にもキー値を格納します。通常、キー値は関数の形式を取ります。このようにして、コンポーネント、イベントから変更をトリガーできます。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 ステートレス関数と高次コンポーネントに精通していることを確認してください。

于 2016-09-10T07:43:07.820 に答える
4

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

mapDispatchToProps受信dispatchしprops、アクションクリエーターをディスパッチにバインドするためのものであり、結果の関数を実行するとアクションがディスパッチされます。

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

React redux: connect: 引数

于 2016-09-09T20:52:30.550 に答える