Relax
A React state management library Based on Hooks, it begins as a fork of stamen
Feature
Relax is opinionated, it has these benefits:
- Simplified API, like Vuex
- Typescript friendly
- Hooks based, no
connect、mapState
- Multiple store/module
Installation
yarn add relax-ts
Quick Start
const useSelector dispatch Provider = const Counter = { const count = return <div> <span>count</span> <div> <button onClick= >-</button> <button onClick= >+</button> <button onClick= >async+</button> </div> </div> } { return <Provider initialState= count: 10 > <Counter /> </Provider> } ReactDOM
Check on CodeSandbox: Basic | Async
Examples
Api
Overview
const someStore = const useSelector dispatch = someStore
state
The initial state of a Store.
const someStore =
reducers
Two type action in Relax: reducers and effects, you can update state in reducers only.
const someStore =
effects
You can handle async actions in effects. Such as Fecthing data via nenwork
const someStore =
useSelector
Get state in view using react hooks api.
const App = { const useSelector = counterStore const count = return <span>count</span>}
dispatch
Dispatch an Action to update state.
const App = { const useSelector dispatch = counterStore const count = return <div> <span>count</span> <button onClick= >-</button> <button onClick= >+</button> </div> }