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

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

Last synced: 11 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/react-widget/connect
• Owner: react-widget
• License: mit
• Created: 2021-08-18T15:11:48.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2022-03-22T02:35:58.000Z (almost 4 years ago)
• Last Synced: 2024-04-24T01:01:49.765Z (almost 2 years ago)
• Language: TypeScript
• Homepage:
• Size: 496 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-widget-connect

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

## 安装

`npm install --save react-widget-connect`

## 使用

```tsx

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'

```

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

```tsx

// App.tsx

function App(){

  const info = connect.useSelector( value => ({

    username: value.name

  }))

 // 建议在使用 useSelector 时配合 React.useMemo

 return React.useMemo(() => 
{info.username}
, [info])

}


```