- react-redux没有封装逻辑处理,该怎么处理还怎么处理。
- 函数式组件里用高阶组件不用connect,而是用两个钩子函数。
- connect里传进去的组件a,这个a组件必须被provider包裹,要不然的话传进来的组件是无效的。
- provider 的store属性就是我们创建的store,
- connect()放的返回值是个高阶组件,第一个()里是传值的,第二个()调用是真正的高阶组件。
- 绑定的事件都需要作为第一个()的参数传到第一个括号传进去。可以在外面进行处理,然后把函数名放到第一个括号里。
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的三个值
mapStateToProps
- 作用:将
store里的数据发送到组件的props里,可以在这个函数里进行数据处理,把想要的数据拿出来,然后再传到组件里,只要store里的数据一更新,这个方法就会再次调用,第一次加载的时候他也会调用,之后每次修改store他也会调用。这个函数接受一个state,就是store里的数据。 - 这个函数里的
return返回的对象,这个对象就会传递给App,作为了App的属性。
mapStateToProps这个函数也会订阅store,里面的state变化,就会强制渲染组件
mapDispatchToProps
- 作用:分发
action。它接收一个dispatch方法作为参数,return回去一个对象,然后这个对象键名自己起,键值是个函数,函数里调用dispatch方法分发action。这里面可以有很多个键值对。 return的对象作为了组件的属性,做交互的时候可以在里面通过this.props调用这个函数
出口index,js文件
App.js文件
reduxcer.js文件
store.js文件
action.js文件
在函数式组件里使用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()