👙A sexy immutable React state management library
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
__tests__
examples refactor: index.tsx & example Oct 2, 2018
src fix: updater as array Oct 6, 2018
.coveralls.yml
.gitignore feat: consumer->consume Sep 30, 2018
.npmrc
.prettierrc
.travis.yml feat: consumer->consume Sep 30, 2018
CHANGELOG.md
LICENSE
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
yarn.lock

README.md

Stamen

npm gzip size Build Status Coverage Status npm GitHub license

A sexy immutable React state management library

Hey~

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.

Why?

  • 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

Installation

yarn add stamen

Documentation

English | 简体中文

Usage

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

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

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

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

Check on CodeSandbox: Basic | Async

Examples

API

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 => {
    state.count++
  })
}

export function decrement() {
  mutate(state => {
    state.count--
  })
}

export { consume, mutate }

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

consume()

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

<div>
  {consume(
    state => state.info.name,
    name => (
      <span>{name}</span>
    ),
  )}
</div>

mutate()

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 => {
    state.count++
  })
}

getState()

Get the current state object.

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

FAQ

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.

License

MIT License