Я узнал, как Redux был реализован под капотом. И я пришел к этому репо Simple-Redux
Я превратил всю эту библиотеку в хуки. Но я столкнулся с проблемой в компоненте подключения. Вот как эта библиотека реализовала компонент подключения (используя класс)
export default function connect(mapStateToProps) {
return function wrapWithConnect(WrappedComponent) {
class Connect extends PureComponent {
constructor(props) {
super(props)
this.selectDerivedProps = makeDerivedPropsSelector(mapStateToProps)
this.selectChildElement = makeChildElementSelector(WrappedComponent)
this.renderWrappedComponent = this.renderWrappedComponent.bind(this)
}
renderWrappedComponent({ storeState }) {
let derivedProps = this.selectDerivedProps(storeState)
return this.selectChildElement(derivedProps)
}
render() {
return (
<Context.Consumer>{this.renderWrappedComponent}</Context.Consumer>
)
}
}
return Connect
}
}
Я попытался преобразовать в ловушки, но затем весь потребитель контекста перерисовывается. Это не избежать повторного рендеринга всего приложения
Это то, что я сделал
function connect(mapStateToProps) {
return function wrapWithConnect(WrappedComponent) {
function Connect() {
const state = useContext(Context)
const selectDerivedProps = makeDerivedPropsSelector(mapStateToProps)
const selectChildElement = makeChildElementSelector(WrappedComponent)
renderWrappedComponent({ storeState }) {
let derivedProps = selectDerivedProps(storeState)
return selectChildElement(derivedProps)
}
return renderWrappedComponent(state)
}
return Connect
}
}
export default React.memo(connect)
Что я здесь не так делаю?