# boko

> A simple yet scalable state-management solution built on-top of `redux`.

Latest version **0.3.0** (published 2021-09-15) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2021-09-15 |
| First published | 2021-06-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | tlonny |

## Links

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

## Recent versions

- 0.3.0 (latest) — 2021-09-15
- 0.2.0 — 2021-06-18
- 0.1.0 — 2021-06-18

## README

# Boko

A simple yet scalable state-management solution built on-top of `redux`.

### 1. Installation

Install boko using:

```
npm install boko
```

### 2. Setup redux

First we must setup the redux store using the boko reducer and middleware:

```javascript
import {createStore, applyMiddleware} from "redux"
import {reducer, middleware} from "boko"

const store = createStore(reducer, applyMiddleware(middleware))
```

### 3. Define state nodes

Now we can define "state nodes". These are essentially individual atoms of state and it is up to you to decide how you wish to divide your app state across these nodes.

```javascript
import boko from "boko"

const foo = boko(0)
const bar = boko(1)
```

In the example above, we've created two nodes, each initially storing a distinct number.

### 4. Create thunks to modify your state

Mutating state is done via thunks (hence the middleware). For example, lets write a thunk that swaps the values of these two state nodes.

```javascript
const swapValues = (store) => {
    // Grab the initial values of the state nodes.
    const fooVal = foo.get(store)
    const barVal = bar.get(store)
    
    // Swap 'em.
    foo.set(barVal)(store)
    bar.set(fooVal)(store)
}
```

### 5. Connect to React

Now we can (optionally) connect our state up to React components. As this is built _ontop_ of Redux, we can use the standard `react-redux` library to achieve this. We'll create a higher-order component that provides the values of `foo` and `bar` as props, as well as a nullary method to swap said values.

```javascript
import {connect} from "react-redux"

export const higherOrderComponent = connect(
    (state) => ({
        // Use the lens methods to grab the values of the state nodes.
        foo: foo.lens(state),
        bar: bar.lens(state)
    }),
    (dispatch) => ({
        // The middleware we've included allows us to dispatch thunks directly.
        swap: () => dispatch(swapValues)
    })
)
```

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