在选择器中访问react路由器状态

Question

我正在将应用程序的一部分状态从商店移动到URL。

我目前正在使用redux来管理我的应用程序的状态以及重新选择创建选择器。选择器从redux存储中的状态计算派生值(原则上，这是它们唯一的输入)。

现在状态的一部分将被包含在URL中，所以我不确定如何去阅读它。

我看过react-router-redux，乍一看似乎是解决方案(实际上，我可以使用state.routing.locationBeforeTransitions.query获得我想要的值)，但这似乎不是正确的方法，因为在他们的文档中它说:

您不应该直接从Redux存储中读取位置状态。

是否有另一种方法可以访问我的位置状态，或者我应该忽略这个警告并在我的选择器中使用它?

Answer 1

你是正确的，react-router-redux文档似乎不建议这样获取你的路由器状态。

虽然重选选择器通常只使用第一个参数(状态)，但它们实际上可以使用第二个参数(组件的props)。在这些道具中，你会发现params被React路由器传递(假设它们被传递给你试图传递给connect的组件)。

我在下面包含了一个微不足道的示例，其中我所做的只是将location大写，但是您可以想象制作一个复杂的选择器，其中包括使用state从Redux存储中获取内容的其他选择器。

const selectLocation = (_state, props) => props.location;
const selector = createSelector(
  selectLocation, 
  (location) => ({ upperCasedLocation: location.toUpperCase() })
);
const MySmartComponent = (props) => <div>{props.upperCasedLocation}</div>;
export default connect(selector)(MySmartComponent);