@attack-monkey/reactstate
v1.0.2
Published
Simple State Management for React
Downloads
4
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.
import { AddState } from 'reactstate.config'
<MyApp>
<AddState id="counter1" init={1}/>
<AddState id="counter2" init={1}/>
</MyApp>
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
.
import { fromState } from 'reactstate.config.ts'
export const MyComponent = () =>
fromState(
'myComponent',
['counter1', 'counter2'],
({ counter1, counter2 }) =>
<div>
<h1>{counter1}</h1>
<h1>{counter2}</h1>
</div>
)
... and
import { AddState } from 'reactstate.config'
import { MyComponent } from 'components/MyComponent'
<MyApp>
<AddState id="counter1" init={1}/>
<AddState id="counter2" init={1}/>
<MyComponent />
</MyApp>
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.
import { fromState, mutateState } from 'reactstate.config'
const increment = (stateKey, currentState) => mutateState(stateKey, currentState + 1)
const MyComponent = () =>
fromState(
'myComponent',
['counter1', 'counter2'],
({ counter1, counter2 }) =>
<div>
<h1>{counter1}</h1>
<h1>{counter2}</h1>
<button onClick={
() => increment('counter1', counter1)
}>Increment counter 1</button>
<button onClick={
() => increment('counter2', counter2)
}>Increment counter 2</button>
</div>
)
Setup & Typesafety
reactstate works best with 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<State, Subscriptions>()
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.