[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KFbntbYc-1597115377927)(README_files/1.png)]
$ npm install cyanx
$ yarn add cyanx
存放的数据类型
withCyanxObserver(component, publicStoreName, publicStoreDefaultValues)
是一个高阶组件HOC,有3个参数
参数名 | 是否必填 | 说明 |
---|---|---|
component | *必填 | 需转化为观察者的组件 |
publicStoreName | *必填 | 需观察公用仓库的名称 |
publicStoreDefaultValues | *必填 | 公用仓库的默认值 |
withCyanxObservable(component, publicStoreName, stateKeyArray)
是一个高阶组件HOC,有3个参数
参数名 | 是否必填 | 说明 |
---|---|---|
component | *必填 | 需转化为可观察的组件 |
publicStoreName | *必填 | 需引入的公用仓库的名称 |
stateKeyArray | 选填 | 组件需引用的公用仓库中状态的Key名称,引入的state会直接存入可观察组件的props中 |
特征
${公用仓库的名称}Dispatch
;或可观察组件的props中的名为${公用仓库的名称}
的对象。此中有dispatch
的元素
例子:有一个公用仓库publicStore
,可观察组件C
观察了公用仓库publicStore
;可观察组件C
获取公用仓库publicStore
的dispatch
可以通过一下两种方式拿到:
props.publicStoreDispatch
||
props.publicStore.dispatch
// 公用仓库的名称
const PublicStoreName = 'publicStore';// 公用仓库的名称,自己定义
// 公用仓库默认值
const publicStoreDefaultValues = {
a: 1,
b: {},
c: ()=>{},
}
import { withCyanxObserver } from 'cyanx';// 引入观察者HOC
// 观察者组件
const ComponentObserver = () => {
...
return (
<>
<ComponentObservable />
</>
)
}
export default withCyanxObserver(ComponentObserver, PublicStoreName, publicStoreDefaultValues);
import { withCyanxObservable } from 'cyanx';// 引入可观察的HOC
// 观察者组件
const ComponentObservable = ({a, b, c, publicStoreDispatch, ...props}) => {...}
||
const ComponentObservable = (props) => {
const {a, b, c, dispatch} = props.publicStore;
}
export default withCyanxObservable(ComponentObservable, PublicStoreName, ['a', 'b', 'c']);
Copyright © 2020-present, Bholder CY
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。