Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ncking/react-simple-store
A React.js store based on hooks: tiny & easy to use
https://github.com/ncking/react-simple-store
hooks javascript mobx-react-alternative preact react react-global-state react-global-state-manager react-hooks react-state-management react-store redux redux-alternative state-management typescript
Last synced: about 1 month ago
JSON representation
A React.js store based on hooks: tiny & easy to use
- Host: GitHub
- URL: https://github.com/ncking/react-simple-store
- Owner: ncking
- Created: 2023-04-27T14:04:50.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-05-29T13:17:07.000Z (7 months ago)
- Last Synced: 2024-10-17T02:33:54.542Z (2 months ago)
- Topics: hooks, javascript, mobx-react-alternative, preact, react, react-global-state, react-global-state-manager, react-hooks, react-state-management, react-store, redux, redux-alternative, state-management, typescript
- Language: TypeScript
- Homepage:
- Size: 527 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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 (
{count}
+
);
};
```