web-dev-qa-db-ja.com

mapStateToPropsおよびmapDispatchToPropsでownProps引数を使用することは何ですか？

ReduxのmapStateToProps関数に渡されるmapDispatchToPropsおよびconnect関数は、2番目の引数としてownPropsを取ります。

[mapStateToProps(state, [ownProps]): stateProps] (Function):

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function):

オプションの[ownprops]引数は何ですか？

Reduxのドキュメントに のものがあるので、物事を明確にするための追加の例を探しています

reduxreact-redux
73
therewillbecode

ownPropsパラメータが指定されている場合、react-reduxはコンポーネントに渡されたプロップをconnect関数に渡します。それで、あなたがこのような接続されたコンポーネントを使うならば：

import ConnectedComponent from './containers/ConnectedComponent'

<ConnectedComponent
  value="example"
/>

ownPropsおよびmapStateToProps関数内のmapDispatchToPropsはオブジェクトになります。

{ value: 'example' }

そして、このオブジェクトを使ってこれらの関数から何を返すかを決めることができます。

たとえば、ブログ投稿コンポーネントでは、次のようになります。

// BlogPost.js
export default function BlogPost (props) {
  return <div>
    <h2>{props.title}</h2>
    <p>{props.content}</p>
    <button onClick={props.editBlogPost}>Edit</button>
  </div>
}

その特定の投稿に対して何かをするReduxアクション作成者を返すことができます。

// BlogPostContainer.js
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import BlogPost from './BlogPost.js'
import * as actions from './actions.js'

const mapStateToProps = (state, props) =>
  // Get blog post data from the store for this blog post ID.
  getBlogPostData(state, props.id)

const mapDispatchToProps = (dispatch, props) => bindActionCreators({
  // Pass the blog post ID to the action creator automatically, so
  // the wrapped blog post component can simply call `props.editBlogPost()`:
  editBlogPost: () => actions.editBlogPost(props.id)
}, dispatch)

const BlogPostContainer = connect(mapStateToProps, mapDispatchToProps)(BlogPost)
export default BlogPostContainer

今、あなたはこのようにこのコンポーネントを使用するでしょう：

import BlogPostContainer from './BlogPostContainer.js'

<BlogPostContainer id={1} />
95
goto-bus-stop

ownPropsは、親によって渡された小道具を表します。

だから、例えば：

Parent.jsx：

...
<Child prop1={someValue} />
...

Child.jsx：

class Child extends Component {
  props: {
    prop1: string,
    prop2: string,
  };
...
}

const mapStateToProps = (state, ownProps) => {
  const prop1 = ownProps.prop1;
  const tmp = state.apiData[prop1]; // some process on the value of prop1
  return {
    prop2: tmp
  };
};
7
Bar Horing

goto-bus-stopの答えは良いのですが、reduxの作者Abramov/gaearonによると、これらの関数にownPropsを使用すると、プロップが変更されたときにアクション作成者を再バインドする必要があるためです。

このリンクで彼のコメントを参照してください。 https://github.com/reduxjs/redux-devtools/issues/25

4
Steven Anderson