Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ryym/trian
Distributed state management without depending on React Hooks
https://github.com/ryym/trian
Last synced: 6 days ago
JSON representation
Distributed state management without depending on React Hooks
- Host: GitHub
- URL: https://github.com/ryym/trian
- Owner: ryym
- Created: 2020-07-30T11:54:46.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-19T12:10:58.000Z (over 2 years ago)
- Last Synced: 2024-04-13T03:38:31.526Z (10 months ago)
- Language: TypeScript
- Homepage:
- Size: 1.13 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Trian
Trian is my experimental state management library for [React][react], heavily inspired by [Recoil][recoil].
[react]: https://reactjs.org/
[recoil]: https://github.com/facebookexperimental/recoil
- Type Safe
- Distributed - No single state object
- Decoupled - No React Hook requirement for just running
## Motivation
- I like React Hooks, but I don't want to lock all the logic into Hooks.
- Is it really a good practice to manage any states and effects by Hook? Even if they are UI-independent?
- Recoil seems good so I made a minimum version that suits my preference.
## Code Sample
### Play without React
```tsx
import { block, createStore, createDispatch, Thunk } from 'trian';
const Count = block({
default: () => 0,
});
const Increment = (n: number = 1): Thunk => ({ update }) => {
update(Count, (cnt) => cnt + n);
};
const store = createStore();
const dispatch = createDispatch(store);
console.log(store.getValue(Count)); //=> 0
dispatch(Increment);
console.log(store.getValue(Count)); //=> 1
dispatch(Increment, 20);
console.log(store.getValue(Count)); //=> 21
```
### Use with React
```typescript
import React from 'react';
import ReactDOM from 'react-dom';
import { block, createStore, TrianProvider, useValue, useDispatch, Thunk } from 'trian';
const Count = block({
default: () => 0,
});
const Increment = (n: number = 1): Thunk => ({ update }) => {
update(Count, (cnt) => cnt + n);
};
function Counter() {
const count = useValue(Count);
const dispatch = useDispatch();
return (
Count: {count}
dispatch(Increment)}>Increment
);
}
const store = createStore();
ReactDOM.render(
,
document.getElementById('root')
);
```
```javascript
const store = createStore();
// FYI: You can customize the dispatcher.
// This maybe be useful for component testing.
const histories = [];
const dispatch = (action, ...args) => {
histories.push({ action, args });
};
render(
);
// FYI: You can change the state from outside of React components.
// This maybe be useful for component testing.
setTimeout(() => {
store.setValue(Count, 100); //=> Update view
}, 1000);
```
- `useValue`, `useAsyncValue`
- `useBlock`
- `useSelector`, `useAsyncSelector`
- `useAction`
- `useDispatch`