https://github.com/oe/plain-store
A dead simple immutable store for react to manage state in your application, redux alternative in less than 1kb(gzipped).
https://github.com/oe/plain-store
react redux-alternative state-management
Last synced: 5 months ago
JSON representation
A dead simple immutable store for react to manage state in your application, redux alternative in less than 1kb(gzipped).
- Host: GitHub
- URL: https://github.com/oe/plain-store
- Owner: oe
- License: mit
- Created: 2024-06-27T17:24:31.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-16T16:17:31.000Z (over 1 year ago)
- Last Synced: 2026-01-13T23:03:26.464Z (6 months ago)
- Topics: react, redux-alternative, state-management
- Language: TypeScript
- Homepage:
- Size: 79.1 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
plain-store
A dead simple immutable store for react to manage state in your application, redux alternative in less than 1kb gzipped. Signal like store, no reducer, no context, no provider, no HOC, no epic.
## Installation
```bash
# npm
npm install plain-store
# yarn
yarn add plain-store
```
## Usage
using with bundler or es module
```javascript
import { createStore, isDeepEqual } from 'plain-store';
const initialState = {
count: 0
};
const store = createStore(initialState);
store.set({ count: 1 });
function Counter() {
const { count } = store.useStore();
// derive a new value from the store value
const doubled = store.useSelector((state) => state.count * 2);
return (
count: {count}
doubled: {doubled}
store.set((prev) => ({ count: 1 + prev.count }))}>Increment
);
}
store.get(); // { count: 1 }
store.set((prev) => ({ count: 2 + prev.count })); // { count: 3 }, will trigger Counter re-render
```
using with script tag
```html
const { createStore, isDeepEqual } = PlainStore;
const store = createStore({ count: 0 });
store.set({ count: 1 });
```
## API
### createStore(initialState, options?)
Create a store with the initial state.
```ts
import { createStore } from 'plain-store';
interface ICreateStoreOptions {
/**
* custom comparator for store value changes, default to `isDeepEqual`
* * use it when the default comparator is not working as expected
* * `isDeepEqual` works for most cases, but it's not perfect, you can provide a custom comparator to handle the edge cases or performance issues.
*/
comparator?: (a: any, b: any) => boolean;
}
interface ISetStoreOptions {
/**
* only update the partial value of the store,
* * the new value will be merged with the old value
*/
partial?: boolean;
}
type ISetStoreOptionsType = boolean | ISetStoreOptions
interface IStore {
// listen to the store value changes, return a function to unsubscribe.
subscribe: (listener: () => void) => () => void;
// Get the current state of the store, none reactive, could be used anywhere.
get: () => Readonly;
// Set the state of the store, could be used anywhere, callback could be async.
// * return a promise if the params is async function
// * use getStore() to get the latest state of the store when using async function
// * use partial option to update the partial value of the store
set: (newValue: T | ((prev: T) => (T | Promise)), cfg?: ISetStoreOptionsType): void | Promise
// react hook to get the current state of the store.
useStore: () => Readonly;
// react hook to select a part of the state.
useSelector: (selector: (state: T) => R) => Readonly;
}
function createStore(initialState: T | (() => T), options?: ICreateStoreOptions): IStore;
```
```ts
// always use a new object to update the store value
store.set((prev) => ({ ...prev, newItem: 'xxx' }))
```
### isDeepEqual(a, b)
Check if two values are deeply equal, can efficiently compare common data structures like objects, arrays, regexp, date and primitives.
```ts
import { isDeepEqual } from 'plain-store';
function isDeepEqual(a: any, b: any): boolean;
```
### isPromiseLike(obj)
Check if a value is a promise
```ts
import { isPromiseLike } from 'plain-store';
function isPromiseLike(obj: any): boolean;
```
## License
MIT