image.png
    connect是为了让组件和全局state结合,但是实际上函数的调用形式很奇怪
    为什么不三个参数下来,而是(map,map,(组件))
    代码有很多地方值得优化
    比如user 用到了user,userModifier也用到了user,实际上用到了同一个selector
    image.png
    所以抽取公共selector

    1. const userSelector = state => {
    2. return { user: state.user}

    任何人想要的话,直接
    image.png

    image.png

    同理定义useDispatcher

    image.png
    connect实际上是给了一种提取读写接口的一种方式,不用重复的告诉react,怎么去读写
    image.png

    connect可以调用2次的另外意义,为什么不把connect(userSelector,userDispatcher)抽取出来

    1. const connectToUser = connect(userSelector,userDispatcher)

    所有人去使用connectToUser
    image.png

    把state改成user
    image.png
    所以任何一个组件想要一个数据,直接给自己声明一个connect,就可以拿到读和写
    创建一个目录,connecters
    新建connectToUser.js

    1. import { connect } from '../redux'
    2. const userSelector = state => {
    3. return {user: state.user}
    4. }
    5. const userDispatcher = (dispatch) => {
    6. return {
    7. updataeUser: (attrs )=> dispatch({type: 'updateUser',payload: attrs})
    8. }
    9. }
    10. export default const connectToUser = connect(userSelector, userDispatcher)

    import {connectToUser } from './connecters/connectToUser'

    MapStateTo Props 封装写
    Map Dispatch To Props 封装读
    之所以分成2次调用,方便调用一次,得到半成品。想用组件,调用不同的组件
    半成品把读写接口传给不同组件