手动实现connect高阶函数

[Twlig]

手动实现connect高阶函数

redux中的connect，接收state和dispatch，以及UI组件，把state和dispatch挂载在UI组件上。

import { useState } from "react"

const connect = function (mapstatetoprops: any, mapdispatchtoprops: any) {
    return function (Component: any) {
        return function () {
            return <Component {...Object.assign({}, mapdispatchtoprops, mapstatetoprops)} />
        }
    }
}

function B(props: any) {
    const { a, setA } = props
    return (
        <li
            onClick={() => {
                setA(a + 1)
            }}
        >
            {a}
        </li>
    )
}

function A() {
    const [a, setA] = useState(1)
    const WithC = connect({ a }, { setA })(B)
    return <WithC />
}
export default A