react-redux/类式组件和函数式组件

329 阅读3分钟
  1. react-redux没有封装逻辑处理,该怎么处理还怎么处理。
  2. 函数式组件里用高阶组件不用connect,而是用两个钩子函数。
  3. connect里传进去的组件a,这个a组件必须被provider包裹,要不然的话传进来的组件是无效的。
  4. provider 的store属性就是我们创建的store,
  5. connect()放的返回值是个高阶组件,第一个()里是传值的,第二个()调用是真正的高阶组件。
  6. 绑定的事件都需要作为第一个()的参数传到第一个括号传进去。可以在外面进行处理,然后把函数名放到第一个括号里。

Connect方法

  • connenct并不会改变它“连接"的组件,而是提供一个经过包裹的connect组件,将store和组件联系起来
  • export default connect([mapStateToProps],[mapDispatchToProps],[mergeProps], [options])(className)
  • ■connect接受4个参数,分别是mapStateToProps,mapDispatchToProps,mergeProps,options
  • 1>mapStateToProps(state)方法允许我们将store中的数据作为props绑定到组件中,只要store更新了就会调用mapStateToProps方法,mapStateToProps返回的结果必须是object对象,该对象中的值将会更新到组件中
  • 2>mapDispatchToProps(dispatch,[ownProps])传入dispatch,第二个参数允许我们将action作为props绑定到组件中,mapDispatchToProps希望你返回包含对应action的object对象
  • 3>mergeProps:.mergeProps如果不指定,则默认返回Object.assign(0,ownProps,state,dispatchProps),顾名思义,mergeProps是合并的意思。将state合并后传递给组件。
  • 4>options:通过配置项可以更加详细的定义connect的行为,通常只需要执行默认值。

connect的三个值

  1. mapStateToProps
  • 作用:将store里的数据发送到组件的props里,可以在这个函数里进行数据处理,把想要的数据拿出来,然后再传到组件里,只要store里的数据一更新,这个方法就会再次调用,第一次加载的时候他也会调用,之后每次修改store他也会调用。这个函数接受一个state,就是store里的数据。
  • 这个函数里的return返回的对象,这个对象就会传递给App,作为了App的属性。
mapStateToProps这个函数也会订阅store,里面的state变化,就会强制渲染组件
  1. mapDispatchToProps
  • 作用:分发action。它接收一个dispatch方法作为参数,return回去一个对象,然后这个对象键名自己起,键值是个函数,函数里调用dispatch方法分发action。这里面可以有很多个键值对。
  • return的对象作为了组件的属性,做交互的时候可以在里面通过this.props调用这个函数

出口index,js文件

6.png

App.js文件

1.png

reduxcer.js文件

2.png

store.js文件

3.png

action.js文件

4.png

在函数式组件里使用react-redux

下面两个是自定义的hook

useSelector()

  • 使用方法:import {useSelector} from "react-redux"
  • 作用:获取store里的数据
  • 在函数式组件中使用useSelector钩子函数,依然要使用react-redux里的Provide组件.
  • useSelector会自己订阅redux的store,只要useSelector函数返回值变化,就会更新组件。如果返回值是个对象,那么有可能组件每次都渲染,即使对象里面的数据一样,但指针不一样,即对象地址不一样就会组件重新渲染。
  • 想在函数里更新store,需要使用。

useDispatch()

  • 使用方法:import {useDispatch} from "react-redux"
  • 作用:分发action。但是要先调用该函数,这个钩子函数里return真的是store.dispatch()

QQ图片20220927155733.png