在连接到不同状态部分的不同路由上重用react / redux组件

Question

我遇到了一个问题因为我有一个相当复杂的组件来呈现项目列表。 项目列表直接从redux状态树中获取。 我希望有两个单独的路由重用相同的组件，但每个路由都将连接到状态树中的不同列表。

这是一个简化的例子：

从状态树开始：

state = {
    fruits: ['apple', 'banana', 'grape', 'pear'],
    vegetables: ['celery', 'carrot', 'cucumber']
}

和一个简单的列表组件

class ListView extends Component {
  render() {
    return (
      <div>
        {this.props.items.map((item, index) => 
          <div key={index}>{item}</div>
        )}
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    items: state.fruits
  }
}

export default connect(mapStateToProps)(ListView)

更高级别的App组件如下所示：

class App extends Component {
  render() {
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}

export default connect()(App)

路线看起来像这样：

  <Route path='/' component={App}>
    <IndexRedirect to='fruits' />
    <Route path='fruits' component={ListView} />
    <Route path='vegetables' component={ListView} />
  </Route>

所以现在ListView组件连接到redux状态的fruits部分。 但是我想在这里使用路线结构，所以'/ fruits'和'/ vegetables'都会使用相同的组件，但'/ fruits'会列出水果，而'/ vegetables'会列出蔬菜。

显而易见的工作是创建一个全新的，相同的组件类，并更改mapStateToProps方法以连接到vegetables数组。

有没有办法重用这个组件，但可以访问每个组件中状态树的不同部分？

Answer 1

从ListView中，您可以将FruitsList和VeggiesList导出为单独的组件，然后根据路径显示正确的组件。

class ListView extends Component {
  render() {
    return (
      <div>
        {this.props.items.map((item, index) => 
          <div key={index}>{item}</div>
        )}
      </div>
    )
  }
}

function mapStateToPropsVeggies(state) {
  return {
    items: state.veggies
  }
}

function mapStateToPropsFruits(state) {
  return {
    items: state.fruits
  }
}

const VeggiesList = connect(mapStateToPropsVeggies)(ListView);
const FruitsList = connect(mapStateToPropsFruits)(ListView);

export default ListView;
export {
    VeggiesList,
    FruitsList
};

然后将路由器更新为：

<Route path='/' component={App}>
  <IndexRedirect to='fruits' />
  <Route path='fruits' component={FruitsList} />
  <Route path='vegetables' component={VeggiesList} />
</Route>