# rc-simple-store

> a simple store for react component

Latest version **0.0.6** (published 2019-12-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install rc-simple-store
pnpm add rc-simple-store
yarn add rc-simple-store
bun add rc-simple-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.0.6 |
| Published | 2019-12-12 |
| First published | 2019-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Unpacked size | 20.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | kavience |
| Maintainers | kavience_owner |
| Keywords | react, store |

## Links

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

## Dependencies (8)

- [react](https://npm.io/package/react.md) ^16.12.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.7.5
- [shallowequal](https://npm.io/package/shallowequal.md) ^1.1.0
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.7.6
- [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.7.4
- [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.7.4
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.7.4

## 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.0.6 (latest) — 2019-12-12
- 0.0.5 — 2019-12-12
- 0.0.4 — 2019-12-12
- 0.0.3 — 2019-12-12
- 0.0.2 — 2019-12-12
- 0.0.1 — 2019-12-12

## README

# rc-simple-store

## a simple store for react component

Use rc-simple-store like redux, but more simple:

```javascript
import React from "react";
import { Provider, create } from "rc-simple-store";
import ComptA from "./compt-a";
import ComptB from "./compt-b";
import ComptC from "./compt-c";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.store = create({
      count: 2
    });
  }
  render() {
    return (
      <Provider store={this.store}>
        <ComptA>
          <ComptC />
          <ComptB />
        </ComptA>
      </Provider>
    );
  }
}
```

`ComptA` is parent component like this:

```javascript
import React from "react";
import { connect } from "rc-simple-store";

export class ComptA extends React.Component {
  render() {
    return (
      <div>
        <h1>Compt A --- {this.props.count}</h1>
        {this.props.children}
      </div>
    );
  }
}

const mapStateToProps = store => ({
  count: store.count,
});

export default connect(mapStateToProps)(ComptA);
```

`ComptB` and `ComptC` is child components like this:

```javascript
import React from "react";
import { connect } from "rc-simple-store";

export class ComptB extends React.Component {
  handleSub = () => {
    this.props.store.setState({
      count: this.props.count - 1
    });
  };
  render() {
    return (
      <div>
        <h1 onClick={this.handleSub}>Compt B --- {this.props.count}</h1>
      </div>
    );
  }
}

const mapStateToProps = store => ({
  count: store.count,
});

export default connect(mapStateToProps)(ComptB);
```

```javascript
import React from "react";
import { connect } from "rc-simple-store";

export class ComptC extends React.Component {
  handleAdd = () => {
    this.props.store.setState({
      count: this.props.count + 1,
    });
  };
  render() {
    return (
      <div>
        <h1 onClick={this.handleAdd}>Compt C --- {this.props.count}</h1>
      </div>
    );
  }
}

const mapStateToProps = store => ({
  count: store.count,
});

export default connect(mapStateToProps)(ComptC);
```

## API

### `create(initialState)`

Create a global state

### `<Provider store>`

Provide store

### `store.setState()`

update global state

### `connect(mapStateToProps)`

Connect parent and use global state

## License

MIT

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