https://github.com/ryym/thisy
A toy state management library heavily depending on JavaScript 'this'!
https://github.com/ryym/thisy
javascript-library
Last synced: about 2 months ago
JSON representation
A toy state management library heavily depending on JavaScript 'this'!
- Host: GitHub
- URL: https://github.com/ryym/thisy
- Owner: ryym
- Created: 2017-09-21T14:15:30.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-03-05T23:03:48.000Z (about 7 years ago)
- Last Synced: 2025-01-17T15:47:02.041Z (4 months ago)
- Topics: javascript-library
- Language: JavaScript
- Homepage:
- Size: 259 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Thisy
Thisy is a toy library to manage application state using plain classes.
```javascript
import { methodsOf, makeStore } from 'thisy'
// 1.
// Define a state class.
class CounterState {
constructor(count = 0) {
this.count = count
}
getCount() {
return this.count
}
// A state modifier method must have a `$` prefix.
$increment(n = 1) {
this.count += n
}
}
// 2.
// Extract the state class methods.
// They are `Action`s in Flux.
const Act = methodsOf(CounterState)
console.log(typeof Act.$increment) //=> 'function'
// 3.
// Create a store.
const store = makeStore(() => [new CounterState()])
// You can subscribe state updates.
store.subscribe(act => console.log('Updated by', act.name))
// 4.
// Send an action to update the state!
store.send(Act.$increment, 10)
//=> 'Updated by $increment'
// 5.
// `send` can also be used to get state data.
console.log(store.send(Act.getCount))
//=> 1
```
Using with React:
```javascript
import { Provider, connect } from 'thisy-react'
import { Act } from '../store/counter'
// Define a component.
const Counter = ({ send, title, count }) => (
{title}
Count: {count}
send(Act.$increment)}>
Increment
)
// Connect the component with your store.
const ConnectedCounter = connect(Conunter, {
mapProps: send => ({ title }) => ({
send,
title,
count: send(Act.getCount),
}),
})
ReactDOM.render(
,
document.getElementByID('counter')
)
```