Wozu dient das Argument ownProps in mapStateToProps und mapDispatchToProps?

Ich sehe, dass die mapStateToPropsund mapDispatchToPropsFunktion, die connectin Redux an die Funktion übergeben werden, ownPropsals zweites Argument dienen.

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

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

Wofür ist das optionale [ownprops]Argument?

Ich suche nach einem zusätzlichen Beispiel, um die Dinge klarer zu machen, da es bereits eines in den Redux-Dokumenten gibt

redux react-redux

— es wird gut
quelle

Könnten Sie genauer sein; Was ist unklar über die Erklärungen dieses Arguments in der Dokumentation, auf die Sie verlinken?

— Jonrsharpe

Ich habe nur nach einem zusätzlichen praktischen Beispiel gesucht, in dem das Argument verwendet wurde.

— Es wird

Könnten Sie dann die Frage bearbeiten , um dies zu verdeutlichen?

— Jonrsharpe

@jonrsharpe Die React-Redux-Dokumente sagen nicht, was es ist, nur dass es existiert, heißt ownProps und dass die Arität der Funktion bestimmt, ob es übergeben wird - nicht was es ist.

— Deb0ch

@ deb0ch Ich weiß nicht, was es vor 18 Monaten gesagt hat, aber im Moment heißt es "die Requisiten wurden an die verbundene Komponente übergeben" . In beiden Fällen hat das OP die Frage inzwischen bearbeitet und eine Antwort erhalten und akzeptiert.

— Jonrsharpe

Antworten:

108

Wenn der ownPropsParameter angegeben ist, übergibt react-redux die Requisiten, die an die Komponente übergeben wurden, an Ihre connectFunktionen. Wenn Sie also eine verbundene Komponente wie diese verwenden:

import ConnectedComponent from './containers/ConnectedComponent'

<ConnectedComponent
  value="example"
/>

Das ownPropsInnere Ihres mapStateToPropsund mapDispatchToPropsFunktionen wird ein Objekt sein:

{ value: 'example' }

Mit diesem Objekt können Sie entscheiden, was von diesen Funktionen zurückgegeben werden soll.

Zum Beispiel in einer Blogpost-Komponente:

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

Sie können Redux-Aktionsersteller zurückgeben, die etwas mit diesem bestimmten Beitrag tun:

// 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

Jetzt würden Sie diese Komponente folgendermaßen verwenden:

import BlogPostContainer from './BlogPostContainer.js'

<BlogPostContainer id={1} />

— gehe zur Bushaltestelle
quelle

Hinweis - defaultProps ist nicht in ownProps enthalten

— Mark Swardstrom

ownProps bezieht sich auf die Requisiten, die vom Elternteil weitergegeben wurden.

Also zum Beispiel:

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

— Bar Horing
quelle

Die Antwort von goto-bus-stop ist gut, aber eine Sache, an die man sich erinnern sollte, ist, dass laut dem Autor von Redux, Abramov / Gaearon, die Verwendung von ownProps in diesen Funktionen sie langsamer macht, weil sie die Aktionsersteller neu binden müssen, wenn sich die Requisiten ändern.

Siehe seinen Kommentar in diesem Link: https://github.com/reduxjs/redux-devtools/issues/250

— Steven Anderson
quelle