Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/markbrown4/stupid_flux
A minimal set of data-structuring to be able to start building an app with React and Flux.
https://github.com/markbrown4/stupid_flux
Last synced: about 2 months ago
JSON representation
A minimal set of data-structuring to be able to start building an app with React and Flux.
- Host: GitHub
- URL: https://github.com/markbrown4/stupid_flux
- Owner: markbrown4
- Created: 2015-05-01T00:26:15.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-05-03T03:47:36.000Z (over 9 years ago)
- Last Synced: 2023-03-26T17:13:30.024Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 129 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Stupid Flux
I like the restrictions that Flux places around data flow but I found it very difficult to get started with. This is a stupidly simple set of data-structuring to allow you to start building a typical web application with React and Flux easily.
The framework/ directory sits along-side your application code so nothing's hidden, extend and hack away at it to build your ideal API. This is just a starting point for your own application framework.
## App
A directory structure and namespace so you can get started.
```coffee
App =
Stores: {}
Actions: {}
Resources: {}
Components: {}
Filters: {}
```
## Factories
Here's how you can create Stores, Actions, Resources and Components:
### Stores
Stores maintain a set of data, expose public getters, listen to dispatched events that tell them they should update their data, and emit a `change` event when they do.
```coffee
# local data store
things = []
states = {
loading: true
}
# public getters
App.Stores.ThingStore = ThingStore = App.createStore
getState: ->
things: things
states: states
updateThings = (data)->
states.loading = false
things = data
ThingStore.emitChange()
loadThings = ->
states.loading = true
ThingStore.emitChange()
App.Dispatcher.register
'refresh-things': -> loadThings()
'things-refreshed': (data)-> updateThings(data)
```
### Resources
Resources are a simple persistence layer where you can put API related methods.
They have RESTful methods and translate dates and utc timestamps from strings in your JSON API to JavaScript date objects.
```coffee
App.Resources.ThingResource = App.createResource
urlRoot: '/api/things'
dateFields: ['delivery_date']
dateTimeFields: ['created_at']
```
All methods return Promises
```coffee
ThingResource.query()
ThingResource.where(disabled: true)
ThingResource.get(1)
ThingResource.update(1, { name: 'Thing 2' })
ThingResource.create(name: 'Thing 3')
ThingResource.destroy(1)
```
### Components
Components can fetch data from a Stores public getters and listen to their `change` event and fire Actions.
```coffee
{ ThingStore } = App.Stores
{ ThingActions } = App.Actions
App.Components.Things = React.createClass
getInitialState: ->
ThingStore.getState()
componentDidMount: ->
ThingStore.bind 'change', @onChange
ThingActions.refresh()
componentWillUnmount: ->
ThingStore.unbind 'change', @onChange
onChange: ->
@setState ThingStore.getState()
render: ->
{ for thing in @state.things
}
```
### Actions
Actions are entry points for data changes across your application, they can dispatch events to stores and initiate communication with the server.
```coffee
{ ThingResource } = App.Resources
App.Actions.ThingActions = App.createActions
refresh: ->
@dispatch 'refresh-things'
ThingResource.query (data)->
@dispatch 'things-refreshed', data
```
### Filters
Filters are just a place to throw view formatting functions
```coffee
App.Filters.name = (person)->
"#{ person.first_name } #{ person.last_name }"
```
## Dependencies
* React
* ReactRouter
* Reqwest
* Moment
* MicroEvent
## Have a play
```
git clone [email protected]:markbrown4/stupid_flux.git
cd stupid_flux
npm start
# run live-server in a separate proccess
npm run live-server
# run json-server in a separate proccess
npm run json-server
```
## How stupid is this really?
I don't know, I've only just started playing with React and Flux so I don't yet know the shortcomings and if there's anything fundamentally wrong with the way data would flow through this design. If you have more experience with it and see gotcha's let me know @markbrown4 :thumbsup:
I don't think it's an entirely stupid idea though.