Azux
A small state management that is inspired on unstated-next
Install
npm install --save azux
Example
import React useState from "react";import useStore Provider from "azux";import render from "react-dom"; { const count setCount = ; const decrement = ; const increment = ; return count decrement increment ;} { const count increment decrement = ; return <div> <button =>-</button> <span>count</span> <button =>+</button> </div> ;} { return <Provider => <CounterDisplay /> <Provider = => <div> <div> <CounterDisplay /> </div> </div> </Provider> </Provider> ;} ;
API
Provider
Passing store and its initial state
<Provider = = />
Passing multiple stores and their initial states
<Provider = =/>
Passing store tuples
<Provider =/>
useStore()
Retrieve store api
{ // this component will rerender whenever store api updated const count increment decrement = ;}
Use selector to retrieve specific store prop
{ // this component will rerender whenever count prop changed const count = ;}
Advanced Usages
Composing stores
const CountStore = initial const count setCount = ; return count { ; } ;; const GreetingStore = initial const name setName = ; return name updateName: setName ;; const MainStore = name count = // extend stores with initial values const counter = ; const greeting = ; return ...counter ...greeting ;;