¿Cuál es el uso de ownProps arg en mapStateToProps y mapDispatchToProps?

95

Veo que las funciones mapStateToPropsy mapDispatchToPropsque se pasan a la connectfunción en Redux toman ownPropscomo segundo argumento.

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

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

¿Para qué sirve el [ownprops]argumento opcional ?

Estoy buscando un ejemplo adicional para aclarar las cosas, ya que ya hay uno en los documentos de Redux.

redux react-redux therewillbecode
fuente
Podrías ser más específico; ¿Qué no está claro sobre las explicaciones de ese argumento en la documentación a la que enlaza?
jonrsharpe
Solo estaba buscando un ejemplo práctico adicional donde se usó el argumento.
therewillbecode
1
Entonces, ¿podría editar la pregunta para aclararlo?
Jonrsharpe
1
@jonrsharpe Los documentos de react-redux no dicen qué es, solo que existe, se llama ownProps y que la aridad de la función determina si se pasa, no lo que es.
deb0ch el
@ deb0ch No sé qué decía hace 18 meses, pero ahora mismo dice "los accesorios pasaron al componente conectado" . De cualquier manera, el OP ha editado la pregunta y ha recibido y aceptado una respuesta.
jonrsharpe

Respuestas:

110

Si ownPropsse especifica el parámetro, react-redux pasará los accesorios que se pasaron al componente a sus connectfunciones. Entonces, si usa un componente conectado como este:

import ConnectedComponent from './containers/ConnectedComponent'

<ConnectedComponent
  value="example"
/>

El ownPropsinterior de sus funciones mapStateToPropsy mapDispatchToPropsserá un objeto:

{ value: 'example' }

Y podría usar este objeto para decidir qué devolver de esas funciones.

Por ejemplo, en un componente de publicación de blog:

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

Puede devolver los creadores de acciones de Redux que hacen algo en esa publicación específica:

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

Ahora usarías este componente así:

import BlogPostContainer from './BlogPostContainer.js'

<BlogPostContainer id={1} />
ir a la parada de autobús
fuente
11
Nota: defaultProps no está incluido en ownProps
Mark Swardstrom
13

ownProps se refiere a los accesorios que fueron transmitidos por el padre.

Así por ejemplo:

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
fuente
8

La respuesta de goto-bus-stop es buena, pero una cosa para recordar es que, según el autor de redux, Abramov / gaearon, usar ownProps en esas funciones las hace más lentas porque deben volver a vincular los creadores de acción cuando cambian los accesorios.

Vea su comentario en este enlace: https://github.com/reduxjs/redux-devtools/issues/250

Steven Anderson
fuente