zoukankan      html  css  js  c++  java
  • react-router搭配react-redux无法监听路由变化的问题

    在react中,要将react组件连接到redux中,通常会这样包装组件

    class Home extends Component {
    
    }
    
    function select(state) {
      return {
        logBox:state.logBox
      }
    }
    
    export default connect(select)(Home)

    但是当搭配react-router的时候,在进行路由跳转的时候,组件不会重新render。这个时候看react-redux的connect方法的说明:

    connect([mapStateToProps][mapDispatchToProps][mergeProps],[options])

    mapStateToProps(state[ownProps]):如果定义该参数,组件将会监听 Redux store 的变化。

    mapDispatchToProps(dispatch[ownProps]):如果传递的是一个对象,那么每个定义在该对象的函数都将被当作 Redux action creator,而且这个对象会与 Redux store 绑定在一起,其中所定义的方法名将作为属性名,合并到组件的 props 中。如果传递的是一个函数,该函数将接收一个 dispatch 函数,然后由你来决定如何返回一个对象,这个对象通过 dispatch 函数与 action creator 以某种方式绑定在一起(提示:你也许会用到 Redux 的辅助函数 bindActionCreators()

    mergeProps(stateProps, dispatchProps, ownProps):如果指定了这个参数,mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。该回调函数返回的对象将作为 props 传递到被包装的组件中。

    options:

    如果指定这个参数,可以定制 connector 的行为。

    • [pure true(Boolean): 如果为 true,connector 将执行 shouldComponentUpdate 并且浅对比 mergeProps 的结果,避免不必要的更新,前提是当前组件是一个“纯”组件,它不依赖于任何的输入或 state 而只依赖于 props 和 Redux store 的 state。默认值为 true
    • [withRef false(Boolean): 如果为 true,connector 会保存一个对被包装组件实例的引用,该引用通过 getWrappedInstance() 方法获得。默认值为 false

    options中pure属性默认为true,估计是因为浅对比的原因,没有获取到路由的变化,因此可以将pure设置为false

    class Home extends Component {
    
    }
    
    function select(state) {
      return {
        logBox:state.logBox
      }
    }
    
    export default connect(select,undefined,undefined,{pure:false})(Home)

    这样路由变化的时候,该组件就能监听并且重新render了。

  • 相关阅读:
    爬虫技术浅析 | WooYun知识库
    爬虫技术实战 | WooYun知识库
    爬虫技术实战 | WooYun知识库
    Day 16: Goose Extractor —— 好用的文章提取工具
    mysql中间件研究(Atlas,cobar,TDDL)
    cygwin with openssh
    win2008 ent r2 开启端口
    MobaSSH SSH server for Windows
    自动化运维工具Ansible详细部署
    中科院NLPIR中文分词java版
  • 原文地址:https://www.cnblogs.com/wandiao/p/7271552.html
Copyright © 2011-2022 走看看