# centralpark

> Tiny store for local and remote (REST, GraphQL) states.

Latest version **1.1.1** (published 2017-12-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install centralpark
pnpm add centralpark
yarn add centralpark
bun add centralpark
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.1 |
| Published | 2017-12-30 |
| First published | 2017-12-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | twoish-bot |

## Links

- npm: https://www.npmjs.com/package/centralpark
- npm.io page: https://npm.io/package/centralpark

## Recent versions

- 1.1.1 (latest) — 2017-12-30
- 1.1.0 — 2017-12-30
- 1.0.0-dev.1 — 2017-12-22

## README

<p align="center">
  <img src="/assets/park.svg" width="300">
</p>

# centralpark

A centralized state container that uses Web Worker.

## Installation

This module is distributed via [npm](https://www.npmjs.com/) which is bundled
with [node](https://nodejs.org/) and should be installed as one of your
project's dependencies:

```bash
npm install --save centralpark
```

If you're using Webpack, you will need worker loader as well:

```bash
npm install --save worker-loader
```

## Usage

1. First create a worker for the store.

```javascript
import { createStore } from "centralpark";

createStore({ counter: 0 }, (command, _data, state) => {
  switch (command) {
    case "increment": {
      const newState = {
        ...state,
        counter: state.counter + 1,
      };

      return newState;
    }
    default: {
      return state;
    }
  }
});
```

2. Initialize the worker in the main thread.

```javascript
import { h, render } from "preact";
import { Provider } from "centralpark/preact";
import App from "path/to/App";
import Store from "worker-loader!path/to/store";

const node = document.getElementById("index");
const store = new Store();

render(
  <Provider store={store}>
    <App />
  </Provider>,
  node,
  node.firstElementChild
);
```

3. Dispatch command and receive projected state.

```javascript
import { h, Component } from "preact";
import { Command, Projection } from "centralpark/preact";

export default Page extends Component {
  render() {
    return (
      <div>
        <Projection
          projector={state => ({ count: state ? state.counter : 0 })}
          render={({ count }) => (
            <div>{count}</div>
          )}
        />
        <Command
          render={dispatchCommand => (
            <button onClick={() => dispatchCommand("increment", {})}>
              Increment
            </button>
          )}
        />
      </div>
    )
  }
}
```

## Credits

Icons made by [Icon Pond](https://www.flaticon.com/authors/popcorns-arts) from
[www.flaticon.com](https://www.flaticon.com/) is licensed by
[CC 3.0 BY](http://creativecommons.org/licenses/by/3.0/).

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