{"id":20956778,"url":"https://github.com/markbrown4/stupid_flux","last_synced_at":"2026-04-20T21:35:39.322Z","repository":{"id":31320900,"uuid":"34883380","full_name":"markbrown4/stupid_flux","owner":"markbrown4","description":"A minimal set of data-structuring to be able to start building an app with React and Flux.","archived":false,"fork":false,"pushed_at":"2015-05-03T03:47:36.000Z","size":132,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-31T11:27:04.779Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markbrown4.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-05-01T00:26:15.000Z","updated_at":"2019-01-28T05:51:49.000Z","dependencies_parsed_at":"2022-09-09T07:30:34.221Z","dependency_job_id":null,"html_url":"https://github.com/markbrown4/stupid_flux","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/markbrown4/stupid_flux","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markbrown4%2Fstupid_flux","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markbrown4%2Fstupid_flux/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markbrown4%2Fstupid_flux/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markbrown4%2Fstupid_flux/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markbrown4","download_url":"https://codeload.github.com/markbrown4/stupid_flux/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markbrown4%2Fstupid_flux/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32067617,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T21:26:33.338Z","status":"ssl_error","status_checked_at":"2026-04-20T21:26:22.081Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T01:27:51.844Z","updated_at":"2026-04-20T21:35:39.289Z","avatar_url":"https://github.com/markbrown4.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stupid Flux\n\nI 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.\n\nThe 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.\n\n## App\n\nA directory structure and namespace so you can get started.\n\n```coffee\nApp =\n  Stores: {}\n  Actions: {}\n  Resources: {}\n  Components: {}\n  Filters: {}\n```\n\n## Factories\n\nHere's how you can create Stores, Actions, Resources and Components:\n\n### Stores\n\nStores 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.\n\n```coffee\n\n# local data store\nthings = []\nstates = {\n  loading: true\n}\n\n# public getters\nApp.Stores.ThingStore = ThingStore = App.createStore\n  getState: -\u003e\n    things: things\n    states: states\n\nupdateThings = (data)-\u003e\n  states.loading = false\n  things = data\n\n  ThingStore.emitChange()\n\nloadThings = -\u003e\n  states.loading = true\n\n  ThingStore.emitChange()\n\nApp.Dispatcher.register\n  'refresh-things': -\u003e loadThings()\n  'things-refreshed': (data)-\u003e updateThings(data)\n\n```\n\n### Resources\n\nResources are a simple persistence layer where you can put API related methods.\nThey have RESTful methods and translate dates and utc timestamps from strings in your JSON API to JavaScript date objects.\n\n```coffee\n\nApp.Resources.ThingResource = App.createResource\n  urlRoot: '/api/things'\n  dateFields: ['delivery_date']\n  dateTimeFields: ['created_at']\n\n```\n\nAll methods return Promises\n\n```coffee\n\nThingResource.query()\nThingResource.where(disabled: true)\nThingResource.get(1)\nThingResource.update(1, { name: 'Thing 2' })\nThingResource.create(name: 'Thing 3')\nThingResource.destroy(1)\n\n```\n\n### Components\n\nComponents can fetch data from a Stores public getters and listen to their `change` event and fire Actions.\n\n```coffee\n\n{ ThingStore } = App.Stores\n{ ThingActions } = App.Actions\n\nApp.Components.Things = React.createClass\n  getInitialState: -\u003e\n    ThingStore.getState()\n\n  componentDidMount: -\u003e\n    ThingStore.bind 'change', @onChange\n    ThingActions.refresh()\n\n  componentWillUnmount: -\u003e\n    ThingStore.unbind 'change', @onChange\n\n  onChange: -\u003e\n    @setState ThingStore.getState()\n\n  render: -\u003e\n    \u003cul className=\"things\"\u003e\n      { for thing in @state.things\n        \u003cThing {...thing} /\u003e\n      }\n    \u003c/ul\u003e\n\n```\n\n### Actions\n\nActions are entry points for data changes across your application, they can dispatch events to stores and initiate communication with the server.\n\n```coffee\n\n{ ThingResource } = App.Resources\n\nApp.Actions.ThingActions = App.createActions\n  refresh: -\u003e\n    @dispatch 'refresh-things'\n\n    ThingResource.query (data)-\u003e\n      @dispatch 'things-refreshed', data\n\n```\n\n### Filters\n\nFilters are just a place to throw view formatting functions\n\n```coffee\n\nApp.Filters.name = (person)-\u003e\n  \"#{ person.first_name } #{ person.last_name }\"\n\n```\n\n## Dependencies\n\n* React\n* ReactRouter\n* Reqwest\n* Moment\n* MicroEvent\n\n## Have a play\n\n```\ngit clone git@github.com:markbrown4/stupid_flux.git\ncd stupid_flux\nnpm start\n\n# run live-server in a separate proccess\nnpm run live-server\n\n# run json-server in a separate proccess\nnpm run json-server\n\n```\n\n## How stupid is this really?\n\nI 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:\n\nI don't think it's an entirely stupid idea though.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkbrown4%2Fstupid_flux","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkbrown4%2Fstupid_flux","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkbrown4%2Fstupid_flux/lists"}