https://github.com/dourajs/doura
The simple, intuitive and reactive state manager you've been waiting for.
https://github.com/dourajs/doura
doura immutable react reactive state-management
Last synced: about 1 year ago
JSON representation
The simple, intuitive and reactive state manager you've been waiting for.
- Host: GitHub
- URL: https://github.com/dourajs/doura
- Owner: dourajs
- Created: 2022-11-08T08:30:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-03T10:17:31.000Z (about 2 years ago)
- Last Synced: 2025-04-09T14:52:12.460Z (about 1 year ago)
- Topics: doura, immutable, react, reactive, state-management
- Language: TypeScript
- Homepage: https://dourajs.github.io/doura/
- Size: 2.11 MB
- Stars: 32
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
doura
Doura is a decentralized state management solution based on the concept of model. It's very simple and intuitive.
- 🔑 100% TypeScript Support
- ⚛️ Reactive and Immutable
- 🔗 Models are organized in a decentralized way
## Installation
Install with npm:
```
npm install doura
```
Install with yarn
```
yarn add doura
```
## Usage
### Define Model
```tsx
import { defineModel } from 'doura'
import { useModel } from 'react-doura'
const todoModel = defineModel({
state: {
todos: [
{
id: 0,
text: 'read books',
isFinished: true,
},
],
/** @type {'all' | 'unfinished'} */
filter: 'all',
},
views: {
unfinishedTodos() {
// autocompletion! ✨
return this.todos.filter((todo) => !todo.isFinished)
},
filteredTodos() {
if (this.filter === 'unfinished') {
return this.unfinishedTodos
}
return this.todos
},
},
actions: {
// any amount of arguments, return a promise or not
setFilter(filter) {
// you can directly mutate the state
this.filter = filter
},
// action can be asynchronous
async getTodos() {
this.todos = await fetchTodos('httpds://api.example.com/todos')
}
},
})
```
### Bind to React Components
```tsx
import { useModel } from 'react-doura'
export function TodoApp() {
// type of `filteredTodos` and `setFilter` are inferred automatically
const { filteredTodos, setFilter } = useModel(todoModel)
return (
setFilter(event.target.checked ? 'unfinished' : 'all')
}
/>
Only show unfinished
{filteredTodos.map((todo) => (
-
{todo.text}
))}
)
}
```
## Credits
Doura is greatly inspired by following excellent projects:
- [Immer](https://github.com/immerjs/immer)
- [Vue.js](https://github.com/vuejs)
- [Pinia](https://github.com/vuejs/pinia)