我们在使用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,
}