stamen
TypeScript icon, indicating that this package has built-in type declarations

1.12.1 • Public • Published

Stamen

npm Build Status npm GitHub license

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

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

Readme

Keywords

none

Package Sidebar

Install

npm i stamen

Weekly Downloads

3

Version

1.12.1

License

MIT

Unpacked Size

27.7 kB

Total Files

11

Last publish

Collaborators

  • forsigner