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 })