# @raiz/react-simple-store

> basic store for react & vanilla js

Latest version **2.0.4** (published 2024-05-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install @raiz/react-simple-store
pnpm add @raiz/react-simple-store
yarn add @raiz/react-simple-store
bun add @raiz/react-simple-store
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2024-05-29 |
| First published | 2023-05-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=18 |
| Dependencies | 0 |
| Unpacked size | 26 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | n king |
| Maintainers | raiz |
| Keywords | react, reactjs, redux, state, store |

## Links

- npm: https://www.npmjs.com/package/@raiz/react-simple-store
- Repository: https://github.com/ncking/react-simple-store
- Issues: https://github.com/ncking/react-simple-store/issues
- npm.io page: https://npm.io/package/@raiz/react-simple-store

## 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

- 2.0.4 (latest) — 2024-05-29
- 2.0.3 — 2024-05-15
- 2.0.2 — 2024-05-13
- 2.0.1 — 2023-08-18
- 2.0.0 — 2023-06-14
- 1.0.4 — 2023-05-28
- 1.0.3 — 2023-05-25
- 1.0.2 — 2023-05-25

## README

## Introduction

This is our take on a react store, tiny & easy to use.
We have been using this in production for since 2020, mostly on React/Preact, SEO driven websites where performance is key.


## Advantages 

- Small bundle size ~0.5K zipped
- Performance - re-rendered only on required state changes
- Familiar api: similar to React-Redux, Zustand, Easy Peasy ...
- Granular module exports adding functionality:  React >> React Redux >> React Redux Connect 
- Extensible; if you need additional methods, just add to the store instance
- Separation of state & actions / reducers ... not combined into one object; simple to reset/reload state
- UseStore; selector instance is not recreated on each render. If your selector maintains state, use the `rebind` argument  to force a new instance.



##
## Installing

```bash
$ npm i @raiz/react-simple-store
#or
$ yarn add @raiz/react-simple-store
```
##
## Create a store(s)
Each store is created with the `createStore` function.
We have extended this function with 2 Redux varients: `createStoreRedux` & `createStoreReduxConnect`;
these add methos to mimic depatch & connect apis.
For all modern projects we recommend just using `createStore`.


#### Basic store
```js
// Basic store, with no arguments
import { createStore } from '@raiz/react-simple-store'
export const counterStore =  createStore();

```


#### Basic store with initial state & actions
```js
// Basic store
import { createStore } from '@raiz/react-simple-store'

const state = {
  count: 0,
};

const actions = (set, get) => {
  return {
    increase: () => set({ count: ++get().count }),
    decrease: () => set({ count: --get().count }),
  };
};

export const counterStore =  createStore({actions, state});
```

##
## Add additional methods
```js
// Basic store
import { createStore } from '@raiz/react-simple-store'
import { shallowEqual } from '@raiz/react-simple-store/utils'
const state = {
  count: 0,
};

const actions = (set, get) => {
  return {
    increase: () => set({ count: ++get().count }),
    decrease: () => set({ count: --get().count }),
  };
};

export const counterStore =  createStore({actions, state});
// add a hook method with shallowEqual fn
counterStore.useStoreShallow = selector => counterStore.useStore(selector, shallowEqual)
```


##
## Export your store
We recommend creating a store in its own file & exporting.
You can export the stores methods, or the store object.
We prefer exporting the store object, this makes it clear & consistent when multiple stores may be consumed in the same file.

```js
// export store methods
// The downside is we must name all the custom actions & most likely will have to alias 
export const { useStore, getState, setState, destroy, subscribe} = createStore({actions, state});

// export the store instance; clear & consistent
export const counterStore = createStore({actions, state});
```

##
## Using your store(s)


```js
// Basic hook usage
import { counterStore } from './counterstore'

const Component = (props) => {
  const count = counterStore.useStore((s) => s.count);
  return (
    <div>
      <div data-testid="count">{count}</div>
      <button type="button" onClick={counterStore.increase}>+</button>
    </div>
  );
};
```

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