https://github.com/hodev-dev/restatejs
restatejs is new global state management library for react which focus on simplicity and productivity.restatejs is context-less so you don't need to wrap your react app in Provider or Context.
https://github.com/hodev-dev/restatejs
Last synced: 24 days ago
JSON representation
restatejs is new global state management library for react which focus on simplicity and productivity.restatejs is context-less so you don't need to wrap your react app in Provider or Context.
- Host: GitHub
- URL: https://github.com/hodev-dev/restatejs
- Owner: hodev-dev
- Created: 2020-11-02T17:03:31.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2020-11-02T18:20:48.000Z (over 5 years ago)
- Last Synced: 2025-12-29T07:23:47.748Z (6 months ago)
- Language: TypeScript
- Homepage:
- Size: 249 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# restatejs
restatejs is new global state management library for react which focus on simplicity and productivity.restatejs is context-less so you don't need to wrap your react app in Provider or Context.
- restatejs is context-less
- restatejs is controller for manage code
- restatejs supports persist state
- restate js supports async (like redux-thunk) and *generators (like redux-saga)
- restatejs uses default react useState() hook under the hood so no need other debuging extentions
# install
```bash
npm install @hodev/restatejs
```
Or
```bash
yarn add @hodev/restatejs
```
# How To Use:
- create controllers folder
- make controller
- create group
- add multi controller to the group
- export group
## make controller
```ts
import { Group, IBasicController, IController, IGroup } from '@hodev/restatejs';
const counterController: IBasicController = {
name: 'counterController',
default: 0,
methods: {
inc: (controller: IController, group: IGroup, input: any, state: any) => {
controller.setState(state + 1);
}
}
}
const counterGroup: IGroup = new Group(localStorage);
counterGroup.add([counterController]);
export { counterGroup };
```
# React Hoook
import group that you just created
```ts
import { counterGroup } from './controller/counterController';
```
import useController
```ts
import { useController } from '@hodev/restatejs';
```
pass group and name of the controller you wnat to connect
```ts
const [state,status] = useController(counterGroup, 'counterController');
```
if gives you state and status of state of controller
state has 3 state
- LOADING : 0
- SUCCESS:1
- FAILED: 2
```ts
import {statusTypes} from '@hodev/restatejs'
```
then you can use then like this:
```ts
(status === statusTypes.LOADING) ? "do soemthing" : "do somethign else"
```
## component will get connected like this
```ts
import { useController } from '@hodev/restatejs';
import React from 'react';
import { counterGroup } from './controller/counterController';
function App() {
const [counter] = useController(counterGroup, 'counterController');
return (
{counter}
);
}
export default App;
```
# Run Method
group has run() method but it has it's own way to run method.
as you see firstly we pass string which contain name of the controller (here is counterController) and we put method name that we want to run after `@`
### inc is function we decleared inside our controller
```ts
counterGroup.run('counterController@inc', [], counter);
```
```tsx
import { useController } from '@hodev/restatejs';
import React from 'react';
import { counterGroup } from './controller/counterController';
function App() {
const [counter] = useController(counterGroup, 'counterController');
const inc = () => {
counterGroup.run('counterController@inc', [], counter);
}
return (
{counter}
increament
);
}
export default App;
```
# persist data
**react native**
- async storage
**web browser**
- localStorage
it should be passed to group constructor
example:
for web
```ts
const counterGroup: IGroup = new Group(localStorage);
```
or
for react native
```ts
const counterGroup: IGroup = new Group(AsyncStorage);
```
then
to persist data just add persist key to your controller then `restatejs` does the job
```ts
{
name: 'counterController',
"default": 0,
persist: true, <= here
methods: {
inc: (controller: IController, group: IGroup, input: any, state: any) => {
controller.setState(state + 1);
}
}
}
```
# typescirpt
```ts
const {IBasicController, IController, IGroup} from '@hodev/restatejs'
```
typescript is fully supported