react-redux知多少？

我们在使用react作为开发框架的时候，如果我们使用了redux，那自然也少不了react和redux的产物--react-redux，那它又暴漏了哪些常用的方法呢？

常用方法

• Provider
• connect
• useSelector
• useDispatch
• useStore

代码实现

import React, { useCallback, useContext, useLayoutEffect } from "react"
import { bindActionCreators } from "redux";

// 创建context,用于传递store给子组件
const ReactReduxContext = React.createContext();
// Provider提供store注入
const Provider = ({store, children}) =>{
    return <ReactReduxContext.Provider value={store}>
        {children}
    </ReactReduxContext.Provider>
}
// 自定义forceUpdate,返回的是update函数
const useForceUpdate = () =>{
    const [state, setState] = useState(0);
    const update = useCallback(()=>{
        setState(prev=> prev+1)
    }, [])
    return update;
}
// 类组件通过connect把state中数据注入到props
const connect = (
    mapStateToProps = state => state,
    mapDispatchToProps
) => WrappedComponent => props =>{
    // 通过context取到store
    const store = useContext(ReactReduxContext)
    const {getState, dispatch, subscribe} = store;
    // mapStateToProps是个函数，接收当前state,执行函数返回所需state
    const stateProps = mapStateToProps(getState())
    const dispatchProps = {}
    // dispatch可能接受对象或者函数
    if(typeof mapDispatchToProps === 'object'){
        // 对象需要用bindActionCreators包装
        dispatchProps = bindActionCreators(mapDispatchToProps, dispatch)
    }else if(typeof mapDispatchToProps === 'function'){
        // 函数直接执行即可
        dispatchProps = mapDispatchToProps(dispatch)
    }

    const forceUpdate = useForceUpdate();
    useLayoutEffect(()=>{
        // 监听store变化，强制刷新页面
        const unsubscribe = subscribe(()=>{
            forceUpdate()
        })
        return ()=>{
            if(unsubscribe) unsubscribe()
        }
    },[store])
    // 将props,stateProps,dispatchProps一起赋给包裹组件
    return <WrappedComponent
        {...props}
        {...stateProps}
        {...dispatchProps}
    />
}

// 函数式组件中三个方法：useSelector、useDispatch、useStore

const useStore = () =>{
    const store = useContext(ReactReduxContext)
    return store
}

const useSelector = (selector) =>{
    const store = useStore()
    const {getState, subscribe} = store;
    const selectedState = selector(getState())
    const forceUpdate = useForceUpdate();
    useLayoutEffect(()=>{
        const unsubscribe = subscribe(()=>{
            forceUpdate()
        })
        return ()=>{
            if(unsubscribe) unsubscribe()
        }
    },[store])
    return selectedState
}

const useDispatch = () =>{
    const store = useStore()
    return store.dispatch;
}

export {
    Provider,
    connect,
    useSelector,
    useDispatch,
    useStore,
    ReactReduxContext,
}