README
React Render Prop Store
React and TypeScript -enabled shared state distributors leveraging render prop
pattern for ease of access to data.
type annotations in examples are TypeScript feature. TypeScript is optional, but recommended.
Install
npm i react-rp-store
Store
This one is most basic. It is just a state distributor.
Create Store
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
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
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 })