一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    react-redux useSelector的坑

    技术 97 2023-07-11 17:46

    在使用react hooks的开发过程中

    我们有个从仓库取值并监听仓库值变化的需求

    之前我们使用的是常规的react-redux的 connect - mapStateToProps

    import { useSelector, connect } from 'react-redux'
    
    const mapStateToProps = (state) => {
      return {
        newSearchOptions: state.controller.newSearchOptions.toJS(),
      }
    }
    
    监听仓库值的变化
      useEffect(() => {
        console.log('newSearchOptions:', newSearchOptions)
      }, [newSearchOptions])
    
    export default connect(mapStateToProps)(SearchResultCommon)
    

    取值方面我们想方便一点 就使用了useSelector

     const newSearchOptions = useSelector((state) =>
        state.controller.newSearchOptions.toJS()
      )
    


    但是坑来了。。我们在监听仓库值变化的时候,页面就开始无限循环了

    因为此时的useSelector 被当作是页面的state,如果在useEffect中更新state,就会无限循环。。

    所以只能使用上面的方式进行仓库值的变化监听...

    看来有时候还是不能省事啊

    文章评论

    评论列表(0