如何将数据从 mapStateToProps 传递到父组件？

Question

This is my component:

export default const NotesComponent = () => {
  return notesList.map((noteProps) => (
    <NewsCard {...notesProps} key={notesProps.id} />
  ))
}

Here is the place where i use this component:

const Notes = (props: NotesProps) => {
  return (
    <Container>
      <NotesComponent />
    </Container>
  )
}

const mapStateToProps = (state) => ({
  notesData: state.notes.notesData,
})
// and other code so mapStateToProps is working correctly

I don't know how to pass notesData to NotesComponent , so the NewsCard can read the data.

Answer 1

You can use connect high-order-function from react-redux and export the returned component:

import { connect } from 'react-redux'

// Redux state data notesData will be available in props
const NotesComponent = ({notesData}) => { 
  return notesData.map((noteProps) => (
    <NewsCard {...noteProps} key={noteProps.id} />
  ))
}

const mapStateToProps = (state) => ({
  notesData: state.notes.notesData,
})

export default connect(mapStateToProps)(NotesComponent)

Or, as NotesComponent is a function component, you can use react-hook useSelector instead of using connect to read redux data:

// in a function component
import { useSelector } from 'react-redux'
...
const notesData = useSelector((state) => state.notes.notesData)

Edit:

You can also connect parent component ie Notes with Redux and pass data to NotesComponent in props (to make NotesComponent a dumb or reusable component):

interface NotesProps {
  notesData: write_your_type[]
  // ...
}

const Notes = (props: NotesProps) => {
  const { notesData } = props
  return (
    <Container>
      <NotesComponent data={notesData} />
    </Container>
  )
}

const mapStateToProps = (state) => ({
  notesData: state.notes.notesData,
})

export default connect(mapStateToProps)(Notes) 
// it now exports enhanced (with redux data in props) Notes component

And, NotesComponent :

export default const NotesComponent = ({data}) => { 
  return data.map((item) => (
    <NewsCard {...item} key={item.id} />
  ))
}