Stamen

A React state management library Based on Hooks

Installation

yarn add stamen

Quick Start

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'stamen'

const { useStore, dispatch } = createStore({
  state: {
    count: 10,
  },
  reducers: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    },
  },
  effects: {
    async asyncIncrement() {
      await new Promise(resolve => {
        setTimeout(() => {
          resolve()
        }, 1000)
      })
      dispatch(A => A.increment)
    },
  },
})

const App = () => {
  const count = useStore(S => S.count)
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(A => A.decrement)}>-</button>
      <button onClick={() => dispatch(A => A.increment)}>+</button>
      <button onClick={() => dispatch(A => A.asyncIncrement)}>async+</button>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

Check on CodeSandbox: Basic | Async

Examples

• Basic - Most basic usage
• Async - To query data from remote server
• TodoMVC - stamen version TodoMVC
• Recommended usage - Recommended practice with stamen

Guide

Stamen is simple, only two step to setup it.

Step 1: creat a store

const counterStore = createStore({
  state: {
    count: 10,
  },
  reducers: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    },
  },
})

Step 1: use it in view

const App = () => {
  const { useStore, dispatch } = counterStore
  const count = useStore(S => S.count)
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch(A => A.decrement)}>-</button>
      <button onClick={() => dispatch(A => A.increment)}>+</button>
    </div>
  )
}

That's it!

Api

Overview

const someStore = createStore({
  state: {},
  reducers: {},
  affects: {},
})

const { useStore, dispatch } = someStore

state

The initial state of a Store.

const someStore = createStore({
  state: {
    count: 0,
  },
})

reducers

Two type action in Stamen: reducers and effects, you can update state in reducers only.

const someStore = createStore({
  reducers: {
    increment(state, payload) {
      state.count += payload
    },
  },
})

effects

You can handle async actions in effects. Such as Fecthing data via nenwork

const someStore = createStore({
  effects: {
    async asyncIncrement() {
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, 1000)
      })
      someStore.dispatch(A => A.increment)
    },
  },
})

useStore

Get state in view using react hooks api.

const App = () => {
  const { useStore } = counterStore
  const count = useStore(S => S.count)
  return <span>{count}</span>
}

dispatch

Dispatch an Action to update state.

const App = () => {
  const { useStore, dispatch } = counterStore
  const count = useStore(S => S.count)
  return (
    <div>
      <span>{count}</span>
      <button onClick={() => dispatch('decrement')}>-</button>
      <button onClick={() => dispatch('increment')}>+</button>
    </div>
  )
}

FAQ

Support Typescript?

Yes, it is total type-safety. Perfect with Typescript.

Single store or Multiple store?

Personally, I would recommend a multi-part solution. More flexible and less Potential performance issues.

License

MIT License