React Redux Router передать реквизит

Question

У меня есть этот 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);

Я хочу передать реквизиты, которые я создаю с помощью mapStateToProps, пример

на домашнюю передачу только данные, isPeddingHome и onGetShows, это возможно?

я пытаюсь использовать

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

передать, но не передать ничего компоненту

Answer 1

Аргумент, передаваемый функции render prop, это route props, а не реквизиты, данные компоненту App.

Вы можете распространять реквизиты Appи маршрут поддерживает также, чтобы получить то, что вы хотите.

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

Аргумент props для рендеринга реквизита prop - это реквизиты маршрутизатора, а не реквизиты компонента, вам нужно изменить код, чтобы передать реквизиты компоненту App компоненту Home.

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>
 );
}

Вы можете деструктурировать реквизит в App.js и передать его в Home, как

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>
 );
}

Однако, поскольку компонент App не использует все реквизиты из mapStateToProps или mapDispatchToProps, вы можете просто подключить домашний компонент

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

export default connect(mapStateToProps)(Home);