目前state组件只用到了state.user,如果我们可以提供一个选择函数
比如connect的第一个参数,用括号来表达,state返回一个对象

  1. const User = connect(state => {
  2. return { userstate.user }

对象里面的user拿到state.user
这样做法是有意义的
如果我们拿到的数据点很长比如state.xxx.yyy.zzz.user。name
可以快速获取到局部的state
目前只是api的实现

const User = connect(state => {
   return { user:state.user }
})(({user}) => {

  return <div> User: {user.name}</div>

接着代码的编写
redux.js
connect 函数添加一个参数 selector表示先接受一个参数,再接受第二个参数
const connect = (selector) => (Component) => {

export const connect = (selector) => (Component) => {
  return (props) => {
    const { state,setState } = useContext(appContext)
    const [, update] = useState({})
   const data = selector ? selector(state) : {state: state}

    useEffect(() => {...}, [])
    const dispatch = (action) => {...}
    return <Component {...props} {...data} dispatch={dispatch} >

如何使用

声明data 传入state ,data就是用户需要的所有属性
const data = selector(state)
把所有数据放到component上面,props后面 state={state}删除
return <Component {...props} {...data} dispatch={dispatch} >

有些错误需要处理

1.如果用户没有传selector?
没传data是全局state,传了是局部state
加一个条件判断
const data = selector ? selector(state) : state

这样其他connect都需要调用2个参数,一个是selector,第二个component
其他地方用到connect的也需要修改
image.png

修bug Cannot read property ‘user’ of undefined

image.png
可能是UserModifier 中的state传的不对
image.png
看下源码
修改为data = {state: state} ,意思是传了selector 给一个state,不传给一个user
const data = selector ? selector(state) : {state: state}