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

Question

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

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

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

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

You should not read the location state directly from the Redux store.

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

Answer 1

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

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

我在下面包含了一个简单的示例，其中我所做的只是大写 location，但您可以想象制作一个您想要的复杂选择器，其中包括使用 [=14 的其他选择器=] 从 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);

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

Access react router state in selector

reactjs

react-router

react-redux

react-router-redux

reselect