README
React Whisper ️☝😮
React and TypeScript -enabled shared state distributors leveraging render prop
pattern for ease of access to data.
type annotations in examples are a TypeScript feature. TypeScript is optional, but recommended.
Install
npm i react-whisper
Store
This one is most basic. It is just a state distributor.
Create Store
import { createStore } from 'react-whisper'
const Store = createStore<number>(0)
Read Store
const StoreAsString = () => <Store>{value => value.toString()}</Store>
Write to Store
const newValue = 5
Store.next(newValue)
Reducer
This quite close to what reducer in Redux is. You provide it with values that are not directly put to storage, but reduced and then broadcasted.
Create Reducer
import { createReducer } from 'react-whisper'
const Reducer = createReducer<number, { op: 'add' | 'mult', value: number }>(
0,
(state, { op, value }) => ({ add: state + value, mult: state * value}[op])
)
Read Reducer
const ReducerAsString = () => <Reducer>{value => value.toString()}</Reducer>
Write to Reducer
const newValue = 5
Reducer.next({ op: 'add', value: newValue })
Actor
This is an asynchronous reducer for most advanced usages. Get a message and release new state. There is no requirement that amount of incoming and outgoing messages must match.
To make it easier to understand, example is as synchronous as possible.
Create Actor
import { createActor } from 'react-whisper'
const Actor = createActor<number, { op: 'add' | 'mult', value: number }>(
0,
async (mailbox, next) => {
let state = 0
for await (const { op, value } of mailbox) {
next(state = ({ add: state + value, mult: state * value }[op]))
}
}
)
Read Actor
const ActorAsString = () => <Actor>{value => value.toString()}</Actor>
Write to Actor
const newValue = 5
Actor.next({ op: 'add', value: newValue })