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

Question

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

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

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

我已经看过react-router-redux，乍一看似乎是解决方案（实际上，我可以达到我想要使用的值state.routing.locationBeforeTransitions.query），但是鉴于这似乎并不是正确的方法在他们的文档中说：

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

还有另一种方法可以访问位置状态，还是应该忽略此警告并在选择器中使用它？

Answer 1

您是正确的，react-router-redux文档似乎建议不要以这种方式获取路由器状态。

尽管“重选”选择器通常仅使用第一个参数（状态），但实际上它们可以使用第二个参数（组件的道具）。在这些道具中，您会发现paramsReact Router传递了这些属性（假设它们正在传递给您要尝试传递的组件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);