https://github.com/blackglory/extra-react-store
🌳
https://github.com/blackglory/extra-react-store
browser esm library npm-package react typescript
Last synced: about 2 months ago
JSON representation
🌳
- Host: GitHub
- URL: https://github.com/blackglory/extra-react-store
- Owner: BlackGlory
- License: mit
- Created: 2023-07-13T12:50:37.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2026-05-12T05:39:09.000Z (about 2 months ago)
- Last Synced: 2026-05-12T07:33:21.290Z (about 2 months ago)
- Topics: browser, esm, library, npm-package, react, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/extra-react-store
- Size: 805 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# extra-react-store
## Install
```sh
npm install --save extra-react-store
# or
yarn add extra-react-store
```
## Usage
```tsx
import { Draft } from 'immer'
import { useMemo } from 'react'
import { createStoreContext, Store, useSelector, useUpdater } from 'extra-react-store'
interface IState {
count: number
}
const Context = createStoreContext()
function App() {
const store = useMemo>(() => new Store({ count: 0 }), [])
return (
)
}
function Viewer() {
const count = useSelector(Context, state => state.count)
return (
{count}
)
}
function Controller() {
const update = useUpdater(Context)
return (
update(increment(1))}>Increment
)
}
function increment(value: number): (state: Draft) => void {
return state => {
state.count += value
}
}
```
## API
```ts
import { Draft } from 'immer'
type StoreContext = React.Context>
interface IStore {
getState(): State
setState(newState: State): void
subscribe(fn: (state: State) => void): () => void
}
type Updater = (...args:
| [newState: State]
| [fn: (draft: Draft) => void | State]
) => void
```
### Store
```ts
class Store implements IStore {
constructor(initialState: State)
}
```
### createStoreContext
```ts
function createStoreContext(): StoreContext
```
### useSelector
```ts
function useSelector(
context: StoreContext
, selector: (state: State) => Value
, isEqual: (a: Value, b: Value) => boolean = isReferenceEqual
): Value
```
### useUpdater
```ts
function useUpdater(context: StoreContext): Updater
```
### usePartialUpdater
```ts
function usePartialUpdater(
context: StoreContext
, extractPartialState: (state: State) => PartialState
, mergePartialState: (state: State, partialState: PartialState) => State
): Updater
```