https://github.com/aardio/statecontroller
State Management with React Hooks
https://github.com/aardio/statecontroller
hooks management react react-hooks react-state react-state-management reactjs state state-management typescript
Last synced: 7 months ago
JSON representation
State Management with React Hooks
- Host: GitHub
- URL: https://github.com/aardio/statecontroller
- Owner: aardio
- License: mit
- Created: 2019-09-08T11:57:04.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-10-31T04:07:46.000Z (about 3 years ago)
- Last Synced: 2025-06-22T08:03:10.309Z (7 months ago)
- Topics: hooks, management, react, react-hooks, react-state, react-state-management, reactjs, state, state-management, typescript
- Language: TypeScript
- Homepage:
- Size: 31.3 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# State Controller
State management with React Hooks
## Installation
```sh
npm i state-controller
yarn add state-controller
```
## Example
[](https://codesandbox.io/s/floral-browser-lpimg)
### store/useCounterController.ts
```js
import { useState } from "react"
import stateController,{useIfMounted} from "state-controller"
import useUserController from "./useUserController"
let useValue = ({n=0}) => {
const [counter, setCounter] = useState({value: n })
const [,userController] = useUserController()
const [ifMounted,loading] = useIfMounted();
const controller = {
increment(n: number){
setCounter({ ...counter, value: counter.value + n })
userController.setLastActiveTime( new Date() )
},
update(){
ifMounted(
async ()=>{
return {value:2}
}
).then( setCounter ).catch( e => e && console.error(e) )
ifMounted({value:2}).then( setCounter )
if( ifMounted() ){
setCounter({value:2})
}
}
}
return [counter,controller,loading] as const;
}
let useCounterController = stateController.create(useValue)
export default useCounterController
```
### store/useUserController.ts
```js
import { useState, useMemo } from "react"
import stateController from "state-controller"
const useValue = () => {
const [user, setUser] = useState({
name: "",
lastActiveTime: new Date()
})
const controller = useMemo( ()=>({
setName(n: string){
setUser( user=>({ ...user, name: n }) )
},
setLastActiveTime(d:Date){
setUser( user=>( { ...user, lastActiveTime: d} ) )
},
}),[])
return [user,controller] as const;
}
let useUserController = stateController.create(useValue)
export default useUserController
```
### "Counter.tsx"
```js
import React, { useEffect } from "react"
import useCounterController from "./store/useCounterController"
import useUserController from "./store/useUserController"
const Counter:React.FC<{}> = () => {
const [counter,counterController] = useCounterController()
const [user,userController] = useUserController()
useEffect(
()=>{
userController.setName("stateController")
},[userController]
)
return (
name: { user.name }
value: {counter.value}
{
counterController.increment(1);
} }>add { user.lastActiveTime.toLocaleString() }
)
}
export default Counter;
```
### index.tsx
```js
import React from "react"
import ReactDOM from 'react-dom';
import Counter from "./Counter"
import useUserController from "./store/useUserController";
import useCounterController from "./store/useCounterController";
import stateController from "state-controller"
const App: React.FC = () => {
let useStore = stateController.combine(useUserController,useCounterController)
return (
);
}
ReactDOM.render(, document.getElementById('root'));
```