React Redux 路由器傳遞道具

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 創建的道具，例如

在 Home 上只傳遞數據，isPeddingHome 和 onGetShows，這可能嗎？

我嘗試使用

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

傳遞但不傳遞任何東西給組件

Answer 1

傳遞給render prop 函數的參數是route props ，而不是提供給App組件的 props。

您也可以傳播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

渲染道具回調的道具參數是路由器道具而不是組件道具，您需要更改代碼以將道具傳遞給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 中解構 props 並將它們傳遞給 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所有道具，您可以簡單地連接 Home 組件

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

export default connect(mapStateToProps)(Home);