https://github.com/attack-monkey/reactstate
Simple State Management for React
https://github.com/attack-monkey/reactstate
Last synced: about 1 month ago
JSON representation
Simple State Management for React
- Host: GitHub
- URL: https://github.com/attack-monkey/reactstate
- Owner: attack-monkey
- Created: 2020-09-08T20:38:29.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-14T19:02:01.000Z (almost 6 years ago)
- Last Synced: 2025-01-25T08:44:00.398Z (over 1 year ago)
- Language: JavaScript
- Size: 17.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# reactstate
Simple State Management for React
## Install
`npm i @attack-monkey/reactstate`
> See Setup & Typesafety
## How it works
### Add State
- Add state with the `AddState` component.
- The state stays alive (and available to the whole app) while the component stays alive, which allows you to position the node at the appropriate point in your app.
- When the AddState component is removed from the view then so is the state that it manages.
```tsx
import { AddState } from 'reactstate.config'
```
### Connect State into Components
To subscribe to state use `fromState`. Below we are creating a subscription called 'myComponent', and subscribing to
both `counter1` and `counter2`.
```tsx
import { fromState } from 'reactstate.config.ts'
export const MyComponent = () =>
fromState(
'myComponent',
['counter1', 'counter2'],
({ counter1, counter2 }) =>
{counter1}
{counter2}
)
```
... and
```tsx
import { AddState } from 'reactstate.config'
import { MyComponent } from 'components/MyComponent'
```
### Mutating State
Use `mutateState` to update state at a particular id.
Here we use a reusable `increment` function to mutate both 'counter1' and 'counter2' based on which button is pushed.
```tsx
import { fromState, mutateState } from 'reactstate.config'
const increment = (stateKey, currentState) => mutateState(stateKey, currentState + 1)
const MyComponent = () =>
fromState(
'myComponent',
['counter1', 'counter2'],
({ counter1, counter2 }) =>
{counter1}
{counter2}
increment('counter1', counter1)
}>Increment counter 1
increment('counter2', counter2)
}>Increment counter 2
)
```
### Setup & Typesafety
reactstate works best with typescript
```typescript
// reactstate.config.ts
import { reactstate } from 'reactstate/lib'
export interface State {
counter1?: number
counter2?: number
}
interface Subscriptions {
counter1?: {
myComponent?: (state: State['counter1']) => void
}
counter2?: {
myComponent?: (state: State['counter2']) => void
}
}
// bootstrap reactState with State and Subscription info
export const { AddState, mutateState, fromState } = reactstate()
```
When you now import `AddState`, `fromState`, and `mutateState`from the above `reactstate.config.ts`, you'll get code hints and type inference - because reactstate knows the state of your app and what's subscribing to it.