👙A sexy immutable React state management library
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
examples refactor: index.tsx & example Oct 2, 2018
src fix: updater as array Oct 6, 2018
.gitignore feat: consumer->consume Sep 30, 2018
.travis.yml feat: consumer->consume Sep 30, 2018
README.md refactor: index.tsx & example Oct 2, 2018
package.json chore(release): 1.4.2 Oct 6, 2018
rollup.config.js feat: handle shouldComponentUpdate Sep 30, 2018
tsconfig.json refactor: index.tsx & example Oct 2, 2018
tslint.json refactor: use React Context Api Sep 26, 2018



npm gzip size Build Status Coverage Status npm GitHub license

A sexy immutable React state management library


If you're like me, tire of provider, connections, actions, reducers, effects, dispatch, put, call, payload, @observable, @computed, @observer, @inject...

If you dont't like a lot of boilerplate, concepts, principles, APIs...

If you just want to get off work early.

You can try stamen.


  • Lightweight less 700B after gzip, 40 lines code only
  • Minimalist zero boilerplate, minimal api
  • Intuitive no complex concept, just state and action
  • Clear Easy to write maintainable and readable code
  • Efficient High development efficiency, It's important
  • Typescript Perfect intellisense with state and action
  • Sexy Let you to meet your girlfriend earlier


yarn add stamen


English | 简体中文


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

const { consume, mutate } = createStore({ count: 1 })

const App = () => (
    <span>{consume(state => state.count)}</span>
    <button onClick={() => mutate(state => state.count--)}>-</button>
    <button onClick={() => mutate(state => state.count++)}>+</button>

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

Check on CodeSandbox: Basic | Async



const { consume, mutate, getState } = createStore(initialState)

Create a store instance, use consume to access state, use mutate to update state. We recommend to create multiple store in your app.

A store recommended in Real world:

import { createStore } from 'stamen'

const { consume, mutate } = createStore({
  count: 1,

// an action
export function increment() {
  mutate(state => {

export function decrement() {
  mutate(state => {

export { consume, mutate }

Keeping your state and actions in one file is more better;


consume state in Component, Component will re-render if state is mutated;

First, you need create a store, example:

const { consume, mutate } = createStore({
  count: 1,
  info: {
    name: 'Counter',

Simple usage

<span>{consume(state => state.count)}</span>

Using selectors

    state => state.info.name,
    name => (


Action is a plain function which contain mutate() in it, you can call it in anywhere, in React lifecycle fn、stateless componet... even out of React component, so you don't need HOC.

State is immutable, but you can generate newState by a mutable API mutate, thanks to immer.

function increment() {
  mutate(state => {


Get the current state object.

const { getState } = createStore({ count: 1 })
const currentState = getState()


Compare to Redux and Mobx

Just another choice...

Support Typescript?

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

key typings:

declare function createStore<T>(
  state: T,
): {
  consume<S>(selector: (state: T) => S, renderFn?: (partialState: S) => React.ReactNode): JSX.Element,
  mutate: (fn: (draft: T) => void) => void,
  getState: () => T,

Single store or Multiple store?

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

Can I use HOCs?

No, You don't need it at all. Maybe you are used to using a HOC(like connect, inject) in Redux or Mobx, to get some state or action method in lifecycles. In Stamen, You can access state by getState() and actions in lifecycles directly.


MIT License