# rc-mini-store

> Mini-store, a simple encapsulated React Context utility component.

Latest version **0.1.1** (published 2019-11-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install rc-mini-store
pnpm add rc-mini-store
yarn add rc-mini-store
bun add rc-mini-store
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2019-11-04 |
| First published | 2019-11-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 宇宙南海 |
| Maintainers | yuzhounanhai |
| Keywords | React, Components, Utils, Context, Store |

## Links

- npm: https://www.npmjs.com/package/rc-mini-store
- Repository: https://github.com/yuzhounanhai/mini-store
- Homepage: https://github.com/yuzhounanhai/mini-store#readme
- Issues: https://github.com/yuzhounanhai/mini-store/issues
- npm.io page: https://npm.io/package/rc-mini-store

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.1 (latest) — 2019-11-04
- 0.1.0 — 2019-11-04

## README

# rc-mini-store

一个简单封装React Context的React工具组件。

### 基本使用

```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')
```

---
_Source: https://npm.io/package/rc-mini-store · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._