Simple state management library for React
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
docs docs Oct 16, 2018
test more concise code Apr 19, 2018
.gitignore ignore npmrc Aug 17, 2018
.npmignore ignore npmrc Aug 17, 2018
README.md readme: link title to demo Apr 19, 2018
index.ts include null and undefined in possible non-function arguments Oct 16, 2018
package-lock.json 1.0.6 Oct 16, 2018
package.json 1.0.6 Oct 16, 2018
tsconfig.json TS strict = true Aug 17, 2018

README.md

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