在选择器中访问反应路由器状态

Posted 2023-02-22

【中文标题】在选择器中访问反应路由器状态

【英文标题】：Access react router state in selector

【发布时间】：2017-01-30 01:50:14

【问题描述】：

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

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

现在部分状态将包含在 URL 中，所以我不知道如何阅读它。

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

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

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

【问题讨论】：

您需要从 mapStateToProps 访问路由器的参数吗？

@Utro 从那里调用选择器，但想法是您只传递选择器一个参数，即状态对象。我想我可以使用 ownProps 将我需要的从路由器添加到状态对象...

有一些方法：1) 在 mapStateToProps 中获取 ownProps.params 2) 在组件中：将 this.props.params.someparam 传递给操作 3) 使用 redux-router 将您的路由器状态保存在存储中。

通常选择器可以获得两个参数：状态和道具。很常见github.com/reactjs/reselect#accessing-react-props-in-selectors

【参考方案1】：

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

虽然重新选择选择器通常只使用第一个参数（状态），但它们实际上可以使用第二个参数（组件的道具）。在这些 props 中，你会发现 params 被 React 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);