https://github.com/arturkulig/react-whisper

Simple state management library for React
https://github.com/arturkulig/react-whisper

Last synced: 9 days ago
JSON representation

Simple state management library for React

• Host: GitHub
• URL: https://github.com/arturkulig/react-whisper
• Owner: arturkulig
• Archived: true
• Created: 2018-03-26T09:07:28.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-16T11:19:47.000Z (about 6 years ago)
• Last Synced: 2024-10-15T17:13:29.998Z (24 days ago)
• Language: TypeScript
• Homepage: https://arturkulig.github.io/react-whisper/
• Size: 573 KB
• Stars: 10
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-react-render-props - react-whisper - wide state management (Components / Data)
• awesome-react-render-props - react-whisper - wide state management (Components / Data)

README

        
# [React Whisper ️☝😮](https://arturkulig.github.io/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

```bash

npm i react-whisper

```

## Store

This one is most basic. It is **just** a state distributor.

### Create Store

```tsx

import { createStore } from 'react-whisper'

const Store = createStore(0)

```

### Read Store

```tsx

const StoreAsString = () => {value => value.toString()}

```

### Write to Store

```tsx

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

```tsx

import { createReducer } from 'react-whisper'

const Reducer = createReducer(

    0,

    (state, { op, value }) => ({ add: state + value, mult: state * value}[op])

)

```

### Read Reducer

```tsx

const ReducerAsString = () => {value => value.toString()}

```

### Write to Reducer

```tsx

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

```tsx

import { createActor } from 'react-whisper'

const Actor = createActor(

    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

```tsx

const ActorAsString = () => {value => value.toString()}

```

### Write to Actor

```tsx

const newValue = 5

Actor.next({ op: 'add', value: newValue })

```