如何将redux状态传递给子路由？

Question

我很难理解如何将redux与react-router一起使用.

index.js

[...]

// Map Redux state to component props
function mapStateToProps(state)  {
  return {
    cards: state.cards
  };
}

// Connected Component:
let ReduxApp = connect(mapStateToProps)(App);

const routes = <Route component={ReduxApp}>
  <Route path="/" component={Start}></Route>
  <Route path="/show" component={Show}></Route>
</Route>;

ReactDOM.render(
  <Provider store={store}>
    <Router>{routes}</Router>
  </Provider>,
  document.getElementById('root')
);

App.js

import React, { Component } from 'react';

export default class App extends React.Component {
  render() {
    const { children } = this.props;
    return (
      <div>
      Wrapper
        {children}
      </div>
    );
  }
}

Show.js

import React, { Component } from 'react';

export default class Show extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <ul>
        {this.props.cards.map(card => 
          <li>{card}</li>
        )}
      </ul>
    );
  }
}

这引发了

未捕获的TypeError:无法读取未定义的属性"map"

我发现的唯一解决方案是使用它而不是{children}:

{this.props.children &&
 React.cloneElement(this.props.children, { ...this.props })}

这真的是正确的方法吗？

Answer 1

我通过在每个组件中显式映射状态与连接来解决这个问题：

export default connect(function selector(state) {
  return {
    cards: state.cards
  };
})(Show);

这样我就可以决定组件应该有权访问状态的哪些属性，从而减少对 props 的污染。但不确定这是否是最佳实践。