/connect

https://react-widget.github.io/connect/

Primary LanguageTypeScriptMIT LicenseMIT

react-widget-connect

将React的Context通过connect连接到组件，类似React Redux的connect

安装

npm install --save react-widget-connect

使用

import { createConnect,createCombineConnect } from 'react-widget-connect'

interface IContext1 {
  name: string
  gender: number
}
interface IContext2 {
  age: number
}

const connect = createConnect(IContext1)
const combineConnect = createCombineConnect({
  ctx1:IContext1,
  ctx2:IContext2,
})

// Component.ts
function Component(props: {username: string, age: number}){
  // TODO:
}

// 连接单个Context到组件
export default connect((value, ownProps) => {
  // value.name
  // value.gender
  return {
    username: value.name
  }
})(Component)

// 或

// 连接多个Context到组件
export default  combineConnect((values, ownProps) => {
  // values.ctx1.name
  // values.ctx1.gender
  // values.ctx2.age
  return {
     username: values.ctx1.name
  }
})(Component)


// App.tsx
import Component from './Component'

<Component age={18} />

如不想用connect(...)(Component)的方式，也提供了hooks获取关联的Context数据，示例：

// App.tsx
function App(){
  const info = connect.useSelector( value => ({
    username: value.name
  }))
 // 建议在使用 useSelector 时配合 React.useMemo
 return React.useMemo(() => <div>{info.username}</div>, [info])
}