Redux自定义封装connect和usedispatch 和useSelector

Posted 2021-09-03 我是真的不会前端

前言

多的不多说 直接上代码 说实话，不太懂redux建议先看看文档 一切知识优先看文档和源码 看不懂的再去看一些机构的视频或者看某些大佬的文章

封装connect

本质上自己创建了一个上下文来取出数据state再派发出去。封装该层语法

connect语法

connect(mapStateToprops,mapDispatchToprops)(WrappedComponent)

mapStateToProps

类型是个函数，作用是吧store的数据放在props上 在上下文中…props解构

function mapStateToProps({test}) {
  return {
    msg: test.msg
  }
}

mapDispatchToProps

类型也是一个函数，起作用是把那些派发的信号方法放在props上

function mapDispatchToProps(dispatch) {
  return {
    // 行为的封装
    updateMsg: payload => dispatch(updateMsg(payload))
  }
}

代码

上下文写法

自定义上下文

import React from 'react'
import store from '@/store'
const Mycontext =React.creactContext(null)
function MyProvider({ children }){
	return(
	<Provider context={Mycontext} store={myStore}>
	{children}
	</Provider>
	)
}

export default(mapStateToProps,mapDispatchToProps)=>{
	let state =mapStateToProps(store.getState())
	store.subscribe(function(){
	state=mapStateToProps(store.getState())
})
const actions=mapDispatchToProps(store.dispatch)
}
return WrappedComponent =>{
	return props =>{
	 return (
        <WrappedComponent {...props} {...state} {...actions} />
      )
	}
}

hooksAPI 写法

function Myconnect(mapStateToProps, mapDispatchToProps) {

  const actions = mapDispatchToProps(store.dispatch)

  return WrappedComponent => {

    return props => {
      const [state, setState] = useState(mapStateToProps(store.getState()))

      useEffect(()=>{
        // 订阅监听store的数据变化
        const unsubscribe = store.subscribe(()=>{
          console.log('store changed', store.getState())
          setState(mapStateToProps(store.getState()))
        })
        return ()=>unsubscribe()
      }, [])
     
    }
  }
}

封装hooks api

封装useDispatch

这个比较简单，直接抛出store.dispatch

function useMyDispatch() {
  return store.dispatch
}

封装useSelector

function useQfSelector(fn) {
  // 参考react-redux中的useSelector的源码
  const [, dispatch] = useReducer(s=>s+1,0)
  store.subscribe(()=>dispatch())
  return fn(store.getState())
}