reactjs - Redux 应用程序状态通过 url -> 查询参数

Question

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

如果我想根据 url 查询参数重新加载应用程序 (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

从文档：

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

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

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