React Redux Router pass props

Question

i've this App.js

const mapStateToProps = (state) => {
 return {
   isPeddingHome: state.getShowsHome.isPeddingHome,
   data: state.getShowsHome.data,
   isPeddingMovies: state.getShowsMovies.isPeddingMovies,
   movies: state.getShowsMovies.movies,
   isPeddingSeries: state.getShowsTv.isPeddingSeries,
   series: state.getShowsTv.series
 }
}

const mapDispatchToProps = (dispatch) => {
 return {
  onGetShows: () => dispatch(getShows()),
  onGetMovies: () => dispatch(getMovies()),
  onGetSeries: () => dispatch(getTvSeries())
 }
}

const App = () =>  {
 return (
  <Router>
    <Switch>
      <Route exact path="/"  component={Home}/>
      <Route path="/movies" component={MoviesPage}/>
      <Route path="/tv" component={tvSeriesPage}/>
     </Switch>
   </Router>
 );
}


export default connect(mapStateToProps, mapDispatchToProps)(App);

i want to pass props from that i create with mapStateToProps, example

on Home pass only data, isPeddingHome and onGetShows, it's posssible?

i try to use

render={(props) => <Home {...props} />}

to pass but not pass nothing to component

Answer 1

The argument passed to the render prop function are the route props , not the props given to the App component.

You can spread the App props and the route props as well to get what you want.

const App = props => {
  return (
    <Router>
      <Switch>
        <Route
          exact
          path="/"
          render={routeProps => <Home {...props} {...routeProps} />}
        />
        <Route path="/movies" component={MoviesPage} />
        <Route path="/tv" component={tvSeriesPage} />
      </Switch>
    </Router>
  );
};

Answer 2

The props argument to render prop callback is the router props and no the component props, you need to change your code to pass the props to App component to Home component.

const App = (props) =>  {
 return (
  <Router>
    <Switch>
      <Route exact path="/"  render={(routerProps) => <Home data={props.data} onGetShows={props.onGetShows} isPeddingMovies={props. isPeddingMovies} {...routerProps}/>}/>
      <Route path="/movies" component={MoviesPage}/>
      <Route path="/tv" component={tvSeriesPage}/>
     </Switch>
   </Router>
 );
}

You can choose to destructure the props in App.js and pass them on to Home like

const App = ({isPeddingMovies, onGetShows, data}) =>  {
 return (
  <Router>
    <Switch>
      <Route exact path="/"  render={(routerProps) => <Home data={data} onGetShows={onGetShows} isPeddingMovies={isPeddingMovies} {...routerProps}/>}/>
      <Route path="/movies" component={MoviesPage}/>
      <Route path="/tv" component={tvSeriesPage}/>
     </Switch>
   </Router>
 );
}

However since the App component is not consuming all the props from mapStateToProps or mapDispatchToProps you can simply connect the Home component

const mapStateToProps = (state) => {
 return {
   isPeddingHome: state.getShowsHome.isPeddingHome,
   data: state.getShowsHome.data,
   isPeddingMovies: state.getShowsMovies.isPeddingMovies,
 }
}

export default connect(mapStateToProps)(Home);