# react-soliit

> Simple state management solution for React

Latest version **1.0.9** (published 2019-10-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-soliit
pnpm add react-soliit
yarn add react-soliit
bun add react-soliit
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2019-10-06 |
| First published | 2019-10-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ali Kazmi |
| Maintainers | smakazmi |
| Keywords | react, reactjs, state, redux, flux, context, react-redux, unstated |

## Links

- npm: https://www.npmjs.com/package/react-soliit
- Repository: https://github.com/smakazmi/react-soliit
- Homepage: https://github.com/smakazmi/react-soliit#readme
- Issues: https://github.com/smakazmi/react-soliit/issues
- npm.io page: https://npm.io/package/react-soliit

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 1.0.9 (latest) — 2019-10-06
- 1.0.8 — 2019-10-06
- 1.0.7 — 2019-10-06
- 1.0.6 — 2019-10-06
- 1.0.5 — 2019-10-06
- 1.0.4 — 2019-10-06
- 1.0.2 — 2019-10-05
- 1.0.1 — 2019-10-05
- 1.0.0 — 2019-10-05

## README

# react-soliit :balloon:

> Simple state management solution for React

### The '**Store**' is all you need

No contexts, or redux, or providers, or consumers, or subscribers, or reducers, or actions, or sagas, or thunks, or epics. None of that. Simply

1. Create store(s)
2. Connect to store(s)

That's it

## Installation

```sh
npm install react-soliit --save
```

## Example

### Imports

```jsx
import React from "react";
import { render } from "react-dom";
import StateStore, { withStores } from "react-soliit";
```

### Create the Store

```jsx
const counterStore = new StateStore({ count: 0 });
```

### Create component

```jsx
const Counter = function({ counterStore }) {
  const increment = () =>
    counterStore.setState({ count: counterStore.state.count + 1 });
  const decrement = () =>
    counterStore.setState({ count: counterStore.state.count - 1 });
  return (
    <div>
      <button onClick={decrement}>-</button>
      <span>{counterStore.state.count}</span>
      <button onClick={increment}>+</button>
    </div>
  );
};
```

### Connect component with the Store

```jsx
const ConnectedCounter = withStores(Counter, { counterStore });
```

### Render to DOM

```jsx
render(<ConnectedCounter />, document.getElementById("root"));
```

## using **`withStores`** HOC

The **`withStores`** HOC maps store instances to component props. This allows for the injection of mock stores during testing.

## Live Examples

[Counter Example](https://stackblitz.com/edit/soliit-simple-counter)

[Async Action Example](https://stackblitz.com/edit/soliit-ajax-quotes)

## That's all folks

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