Qual é o uso do argumento ownProps em mapStateToProps e mapDispatchToProps?

95

Vejo que as funções mapStateToPropse mapDispatchToPropsque são passadas para a connectfunção no Redux levam ownPropscomo um segundo argumento.

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

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

Para que serve o [ownprops]argumento opcional ?

Estou procurando um exemplo adicional para deixar as coisas claras, pois já existe um nos documentos do Redux

redux react-redux então será codificado
fonte
Você poderia ser mais específico; o que não está claro sobre as explicações desse argumento na documentação que você vincula?
jonrsharpe
Eu estava apenas procurando um exemplo prático adicional onde o argumento foi usado.
codificará
1
Então você poderia editar a pergunta para deixar isso claro?
Jonrsharpe
1
@jonrsharpe Os documentos react-redux não dizem o que é, apenas que existe, é chamado ownProps e que a aridade da função determina se ela é passada - não o que é.
deb0ch de
@ deb0ch Não sei o que dizia há 18 meses, mas agora diz "os adereços passaram para o componente conectado" . De qualquer forma, o OP editou a pergunta e recebeu e aceitou uma resposta.
jonrsharpe de

Respostas:

110

Se o ownPropsparâmetro for especificado, react-redux passará os adereços que foram passados ​​para o componente em suas connectfunções. Portanto, se você usar um componente conectado como este:

import ConnectedComponent from './containers/ConnectedComponent'

<ConnectedComponent
  value="example"
/>

O ownPropsdentro de suas funções mapStateToPropse mapDispatchToPropsserá um objeto:

{ value: 'example' }

E você pode usar esse objeto para decidir o que retornar dessas funções.

Por exemplo, em um componente de postagem 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>
}

Você poderia devolver os criadores de ação do Redux que fazem algo para aquela postagem 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

Agora você usaria este componente da seguinte maneira:

import BlogPostContainer from './BlogPostContainer.js'

<BlogPostContainer id={1} />
goto-bus-stop
fonte
11
Observação - defaultProps não está incluído em ownProps
Mark Swardstrom
13

ownProps refere-se aos adereços que foram passados ​​pelo pai.

Então, por exemplo:

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

A resposta de goto-bus-stop é boa, mas uma coisa a lembrar é que, de acordo com o autor de redux, Abramov / gaearon, usar ownProps nessas funções as torna mais lentas porque eles devem religar os criadores de ação quando os adereços mudam.

Veja seu comentário neste link: https://github.com/reduxjs/redux-devtools/issues/250

Steven Anderson
fonte