https://github.com/ryym/wramp
Minimal state management library - just a class wrapper
https://github.com/ryym/wramp
flux javascript npm
Last synced: about 1 month ago
JSON representation
Minimal state management library - just a class wrapper
- Host: GitHub
- URL: https://github.com/ryym/wramp
- Owner: ryym
- License: mit
- Created: 2017-01-22T07:49:19.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-23T06:13:35.000Z (over 9 years ago)
- Last Synced: 2025-10-20T20:40:16.996Z (8 months ago)
- Topics: flux, javascript, npm
- Language: JavaScript
- Homepage:
- Size: 206 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Wramp
[![npm version][npm-badge]][npm-page]
[![travis status][travis-badge]][travis-status]
[npm-badge]: https://img.shields.io/npm/v/wramp.svg
[npm-page]: https://www.npmjs.org/package/wramp
[travis-badge]: https://travis-ci.org/ryym/wramp.svg?branch=master
[travis-status]: https://travis-ci.org/ryym/wramp
Wramp is a library which aims to easily construct a unidirectional data flow like [Flux](https://facebook.github.io/flux/docs/in-depth-overview.html#content).
But there is neither Dispatcher nor Action.
All you need to do is to define a class that manages your application state.
Wramp will generate a Store class from it automatically.
```javascript
import { defineStore, watch } from 'wramp'
// Define a class which manages a state.
class AppState {
constructor(count) {
tihs.count = count
}
getCount() {
return this.count
}
$increment() {
this.count += 1
}
}
// Define a store class.
const AppStore = defineStore(AppState)
const store = new AppStore(0)
const watcher = watch(store)
// Output a log whenever the store is updated.
watcher.onUpdate(data => {
console.log(`count is updated by ${data.methodName}:`, store.getCount())
})
store.$increment()
// => count is updated by $increment: 1
```
Like above, Wramp wraps your class and define a new class that has the same method signatures as the wrapped class.
So this new class behaves just like a wrapped class.
Additionally, you can observe a store's updates using the `watch`.
A watcher publishes an event whenever an update method is called.
To define an _update_ method, you just need to follow the two rules:
- The method name must start with `$`
- It must update a state synchronously
Using this `watch`, You can implement an interactive view with [React](https://facebook.github.io/react/).
```javascript
function render() {
ReactDOM.render(
Count: {store.getCount()}
store.$increment()}>Increment
,
document.getElementById('root')
);
}
render();
watch(store).onUpdate(render);
```
[wramp-react](/packages/wramp-react#wramp-react) provides a more generic way to connect a store and views.
Thats' it. There are few rules you need to follow to use Wramp.
All designs such as how to structure and update a state, or how to separate concerns of logics, are up to you.
If you want to update a state asynchronously, follow this way:
1. Define an update method that just changes the state synchronously
1. Use that update method in a method which performs an asynchornous task
```javascript
fetchUser(id) {
this.api.fetchUser({ id }).then(user => {
this.$setUser(user)
})
}
```
## API
- [wramp](/packages/wramp#wramp)
- [wramp-react](/packages/wramp-react#wramp-react)