forsigner / Stamen
Licence: mit
A React state management library based on Hooks
Stars: ✭ 196
Programming Languages
typescript
32286 projects
Labels
Projects that are alternatives of or similar to Stamen
Graphql Normalizr
Normalize GraphQL responses for persisting in the client cache/state
Stars: ✭ 175 (-10.71%)
Mutual labels: state-management
Statefulviewcontroller
Placeholder views based on content, loading, error or empty states
Stars: ✭ 2,139 (+991.33%)
Mutual labels: state-management
React Rewind
Time Travel Debugger for React useReducer
Stars: ✭ 159 (-18.88%)
Mutual labels: state-management
Hgplaceholders
Nice library to show placeholders and Empty States for any UITableView/UICollectionView in your project
Stars: ✭ 2,048 (+944.9%)
Mutual labels: state-management
State Machine Component
⚙️ State machine -powered components in 250 bytes
Stars: ✭ 178 (-9.18%)
Mutual labels: state-management
Dapr
Dapr is a portable, event-driven, runtime for building distributed applications across cloud and edge.
Stars: ✭ 16,274 (+8203.06%)
Mutual labels: state-management
Flutter book
Flutter1.17.x book App,使用Mobx数据管理器支持Android和iOS,使用库json_serializable、json_annotation、dio。
Stars: ✭ 190 (-3.06%)
Mutual labels: state-management
Spaceace
A fancy immutable storage library for JavaScript
Stars: ✭ 167 (-14.8%)
Mutual labels: state-management
Hydrated bloc
An extension to the bloc state management library which automatically persists and restores bloc states.
Stars: ✭ 181 (-7.65%)
Mutual labels: state-management
Cerebral
Declarative state and side effects management for popular JavaScript frameworks
Stars: ✭ 1,946 (+892.86%)
Mutual labels: state-management
Observable Slim
Observable Slim is a singleton that utilizes ES6 Proxies to observe changes made to an object and any nested children of that object. It is intended to assist with state management and one-way data binding.
Stars: ✭ 178 (-9.18%)
Mutual labels: state-management
Reactn
React, but with built-in global state management.
Stars: ✭ 1,906 (+872.45%)
Mutual labels: state-management
Jquery History
Super-seeded by https://github.com/browserstate/history.js
Stars: ✭ 183 (-6.63%)
Mutual labels: state-management
Reto
Flexible and efficient React Store with hooks.
Stars: ✭ 194 (-1.02%)
Mutual labels: state-management
Frideos flutter
An all-in-one Fllutter package for state management, reactive objects, animations, effects, timed widgets etc.
Stars: ✭ 187 (-4.59%)
Mutual labels: state-management
Create flutter provider app
A boilerplate project created in Flutter using Provider and Firebase.
Stars: ✭ 180 (-8.16%)
Mutual labels: state-management
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].