Redux自定义封装connect和usedispatch 和useSelector

Posted 2022-11-28 我是真的不会前端

前言

多的不多说 直接上代码 说实话，不太懂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())