Apa gunanya arg ownProps di mapStateToProps dan mapDispatchToProps?

97

Saya melihat bahwa mapStateToPropsdan mapDispatchToPropsfungsi yang diteruskan ke connectfungsi di Redux mengambil ownPropsargumen kedua.

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

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

Untuk apa [ownprops]argumen opsional ?

Saya mencari contoh tambahan untuk memperjelas karena sudah ada di dokumen Redux

redux react-redux akan ada kode
sumber
Bisakah kamu lebih spesifik; Apa yang tidak jelas tentang penjelasan argumen itu dalam dokumentasi yang Anda tautkan?
jonrsharpe
Saya hanya mencari contoh praktis tambahan di mana argumen itu digunakan.
kode
1
Lalu bisakah Anda mengedit pertanyaan untuk memperjelasnya?
jonrsharpe
1
@jonrsharpe Dokumen react-redux tidak mengatakan apa itu, hanya saja itu ada, disebut ownProps dan arity dari fungsi menentukan apakah itu diteruskan - bukan apa itu.
deb0ch
@ deb0ch Saya tidak tahu apa yang dikatakan 18 bulan yang lalu, tapi sekarang dikatakan "props diteruskan ke komponen terhubung" . Bagaimanapun, OP sejak itu mengedit pertanyaan dan menerima serta menerima jawaban.
jonrsharpe

Jawaban:

112

Jika ownPropsparameter ditentukan, react-redux akan meneruskan props yang diteruskan ke komponen ke dalam connectfungsi Anda . Jadi, jika Anda menggunakan komponen yang terhubung seperti ini:

import ConnectedComponent from './containers/ConnectedComponent'

<ConnectedComponent
  value="example"
/>

Bagian ownPropsdalam Anda mapStateToPropsdan mapDispatchToPropsfungsi akan menjadi objek:

{ value: 'example' }

Dan Anda bisa menggunakan objek ini untuk memutuskan apa yang akan dikembalikan dari fungsi tersebut.

Misalnya, pada komponen posting 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>
}

Anda dapat mengembalikan pembuat tindakan Redux yang melakukan sesuatu ke pos tertentu itu:

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

Sekarang Anda akan menggunakan komponen ini seperti ini:

import BlogPostContainer from './BlogPostContainer.js'

<BlogPostContainer id={1} />
goto-bus-stop
sumber
11
Catatan - defaultProps tidak disertakan dalam ownProps
Tandai Swardstrom
14

ownProps mengacu pada props yang diturunkan oleh orang tua.

Jadi, misalnya:

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
sumber
9

Jawaban goto-bus-stop itu bagus, tetapi satu hal yang perlu diingat adalah, menurut penulis redux, Abramov / gaearon, menggunakan ownProps dalam fungsi-fungsi itu membuatnya lebih lambat karena mereka harus memasang kembali pembuat tindakan ketika alat peraga berubah.

Lihat komentarnya di tautan ini: https://github.com/reduxjs/redux-devtools/issues/250

Steven Anderson
sumber