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

    Keywords

    none

    Install

    npm i stamen

    DownloadsWeekly Downloads

    5

    Version

    1.12.1

    License

    MIT

    Unpacked Size

    27.7 kB

    Total Files

    11

    Last publish

    Collaborators

    • forsigner