Redux app状态通过url - ＆gt;查询参数

Question

使用https://github.com/reactjs/react-router-redux/

如果我想基于url查询params重新加载app（Redux）状态是获取state.routing.locationBeforeTransitions.query属性的正确方法吗？

它有效...只是想知道这是否正确。

Answer 1

使用Redux连接组件，您可以从mapStateToProps的第二个参数访问路由器的道具：

function mapStateToProps (state, ownProps) {
  return {
    num: state.items.num,
    query: ownProps.location.query
  }
}

export default connect(mapStateToProps, null)(YourComponent)

请参阅https://github.com/reactjs/react-router-redux#user-content-how-do-i-access-router-state-in-a-container-component。

您还可以在此处查看演示https://github.com/timarney/react-router-redux-query-params。

Answer 2

来自docs：

  

您不应直接从Redux商店读取位置状态。这是因为React Router异步操作（处理诸如动态加载的组件之类的东西），并且组件树可能尚未与Redux状态同步更新。你应该依赖React Router传递的道具，因为它们只有在处理完所有异步代码后才会更新。

正确的方法是在文档中，但您只能在路径组件（您放在<Route path='/' component={Component} />中的组件）中执行此操作。

如果我想在某个内部组件中访问它，我通常会传递location属性。