0.1.1 • Published 5 years ago
rc-mini-store v0.1.1
rc-mini-store
一个简单封装React Context的React工具组件。
基本使用
import MiniStore from 'rc-mini-store';
// ...
render() {
return (
{/* 创建一个MiniStore,其值由value提供 */}
<MiniStore.Provider
storeName="store1"
value={{
name: 'nanhai'
lang: 'react'
}}
>
<p>段落</p>
{/* B组件订阅store1的数据 */}
<MiniStore.Consumer storeName="store1">
<B />
</MiniStore.Consumer>
</MiniStore.Provider>
)
}
// ...
暴露成员
相关伪代码
export function packMiniStoreStates
export function packMiniStoreState
export default {
Provider: xxx,
Consumer: xxx,
packMiniStoreStates,
packMiniStoreState,
}
packMiniStoreStates(state, context)
一个用以包装 state 类型的 MiniStore 的 value 值,其作用是返回一个对象,使每一个state 的成员(第一层成员)具备一个 set 更改方法。
例如一个组件的 state 为
{
name: 'nanhai'
}
使用该方法的伪代码如下:
import MiniStore, { packMiniStoreStates } from '...';
packMiniStoreStates(this.state, this);
// 也可以使用MiniStore.packMiniStoreStates(this.state, this);
执行该方法后会返回以下结果
{
name: 'nanhai',
setName: (value) => {...}
}
packMiniStoreState(key, value, context)
同 packMiniStoreStates。
packMiniStoreStates 是批量处理 state(处理集合{}),而 packMiniStoreState 则是处理一个 state。
Provider API
成员 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
storeName | 创建出MiniStore的名字,后续订阅组件将会查找这个名字 | string | ||
value | 创建出MiniStore的内容、值,需要传入一个对象。 | { key: string: any } | {} |
Consumer API
成员 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
storeName | 订阅的MiniStore的名字,订阅组件需要在Provider组件的内部,订阅成功后,store的值将会挂载在名为storeName的props下 | string |
订阅多个store
不提倡订阅多个 store,可以查看 React 官方文档 Context 一节了解更多, 但仍然你可以利用 MiniStore 来订阅多个 store:
this.state = {
age: 12
}
// ...
<MiniStore.Provider
storeName="store1"
value={{
...packMiniStoreStates(this.state, this),
otherValue: 'something'
}}
>
<B />
<MiniStore.Provider
storeName="store2"
value={{
name: 'nanhai',
lang: 'react',
...MiniStore.packMiniStoreState('size', this.state.size, this)
}}
>
{/* 订阅store1 */}
<MiniStore.Consumer storeName="store1">
{/* 订阅store2 */}
<MiniStore.Consumer storeName="store2">
<C />
</MiniStore.Consumer>
</MiniStore.Consumer>
</MiniStore.Provider>
</MiniStore.Provider>
订阅组件的使用
订阅了store的组件,将会把订阅的store的所有数据附加至以store名为命名的props上。
即你创建了一个名为goodsStore
的仓库,订阅这个仓库的组件,可以在组件内部读取this.props.goodsStore
.
this.props.store1.otherValue
this.props.store1.setAge(100)
this.props.store2.name
this.props.store2.setSize('100px')