Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hachibeedi/amamori
https://github.com/hachibeedi/amamori
flux-architecture javascript javascript-framework react
Last synced: 15 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/hachibeedi/amamori
- Owner: hachibeeDI
- Created: 2015-12-16T06:52:01.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2016-06-22T14:18:54.000Z (over 8 years ago)
- Last Synced: 2024-11-19T11:01:24.065Z (about 1 month ago)
- Topics: flux-architecture, javascript, javascript-framework, react
- Language: JavaScript
- Size: 238 KB
- Stars: 2
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://travis-ci.org/hachibeeDI/Amamori)
# Amamori
Minimal Flux Framework.
## Overview
Component is a class have utility to observe store event that inherits React view.
Dispatcher is just EventEmitter.
ActionCreator is just functions.
Store is just a class inherits EventEmitter.
## API
### Dispatcher and AppContextProvider
Dispatcher provides a context between Component relationship with parent and child, and flux elements. This is just a EventEmitter.
AppContextProvider is Container to pass the Dispatcher to child Components.
```javascript
// example
const Dispatcher = CreateDispatcher('todo')
class RootContainer extends AppContextProvider { }
document.addEventListener('DOMContentLoaded', e => {
render(
, document.getElementById('amamori-example'))
})
```
### Component
Component extends React.Component.
You can declare the stores as static method names `storeTypes`.
Every store will attach components state automatically.
You'll basically implement the logic to initialize on `componentDidMount`. If you'd like to use `componentWillMount` don't forget to call super function.
You might want to use `loadingView` and `view` method instead of render. `loadingView` will called when declared stores in initializing.
```javascript
// example
class HogeComponent extends Component {
static get storeTypes() { return [SomeNiceStore] }
componentDidMount() {
ActionCreator.initialize(this)
}
loadingView() {
return (
now loading...)
}
view() {
return (
{this.state.somenice.greet})
}
}
```
### Store
```javascript
const NiceRecord = Immutable.Record({greet: '', name: ''})
export class NewTodoStore extends Store {
static get stateType() { return NiceRecord }
observeres(subscribe) {
subscribe('newtodo:content:changes', (key, value) => {
this.update(state => state.set(key, value))
})
}
}
```
### ActionCreator
ActionCreator is receive Dispatcher and cause Action, so That could be just plain function.
There is some helper for communicate with Component in Amamori.
EventHandler, Executor will help you kick action and watch component event. Those will have middrewares.
```javascript
import {EventHandler, Executor} from 'amamori';
// middleware sample
const extractTarget = function (ev) {
return [ev.currentTarget || ev.target];
}
const preventBubling = function (ev) {
ev.preventDefault()
return [ev];
}
const ActionCreator = {
initialize: Executor((ctx, props, state) => {
// or some api call
Promise
.resolve({todo: [
{id: 1, title: 'default', content: 'hogehogehoeg'}
]})
// ${lowered model name}:initialize will cause model initialization
.then(data => ctx.emit('todo:initialize', data))
ctx.emit('newtodo:initialize', {title: '', content: ''})
}),
handleNewTodoChanges: EventHandler([extractTarget], (ctx, props, state, targ) => {
ctx.emit(`newtodo:${targ.name}:changes`, targ.value)
}),
handleTodoAdd: EventHandler([preventBubling, extractTarget], (ctx, props, state, targ) => {
console.log(targ); // we can use multiple middreware
ctx.emit('newtodo:submit', state.newtodo)
}),
}
export default ActionCreator
```
## Dependency
- React
- Immutable.js
### Recomend
- react-router
- axios