Archieved

please use vue3 reactive/ref instead

react-osh

simple react state manager based on observer-util. 'osh' means Observable State-manager with Hooks

react-state-easy seems to be not maintained anymore, so I create this one instead.

• Introduction
• Installation
• Usage
• Limitation

Introduction

react-osh is based on @nx-js/observer-util. it provides below apis:

• createStore for creating global shared store
• useLocalStore for creating local store inside functional component
• view for wrapping components to make them observe store changes
• computed for wrapping a function to computed value getter. similar to React.useMemo but don't need to specific dependencies manually and can be used outside components

Installation

npm install react-osh

or

yarn add react-osh

Usage:

import*asReactfrom'react'import{createStore,useLocalStore,view}from'react-osh'constshared=createStore({value: 1,/** * this is a getter and will be auto wrapped to a 'computed value'(re-compute only when shared.value is changed) */getdouble(){returnshared.value*2},nested: {value: 'foo'},reset(){shared.value=Math.random()}})/** * set second argument to false means don't wrap getters to computed values. * these getters will be called during every render */constrawGetters=createStore({getopposite(){return-shared.value}},false)exportconstFooComp=view(functionFooComp(){constlocal=useLocalStore({count: 0,incr(){local.count++}})return(<div><div>shared.value: {shared.value}</div><div>opposite: {rawGetters.opposite}</div><div>shared.double: {shared.double}</div><div>shared.nested.value: {shared.nested.value}</div><buttononClick={shared.reset}>reset shared.value</button><div>local.count: {local.count}</div><buttononClick={local.incr}>increase local.count</button></div>)})

Limitation

• ONLY SUPPORT Functional Component.
• based on es6 Proxy so don't support IE
• can't use a computed value inside another