{"id":13394823,"url":"https://github.com/kenwheeler/mcfly","last_synced_at":"2025-05-16T04:03:50.287Z","repository":{"id":22687268,"uuid":"26031018","full_name":"kenwheeler/mcfly","owner":"kenwheeler","description":"Flux architecture made easy","archived":false,"fork":false,"pushed_at":"2017-03-30T13:54:55.000Z","size":1751,"stargazers_count":760,"open_issues_count":9,"forks_count":46,"subscribers_count":23,"default_branch":"master","last_synced_at":"2025-05-10T08:51:59.557Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kenwheeler.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-31T19:52:13.000Z","updated_at":"2025-05-02T00:46:02.000Z","dependencies_parsed_at":"2022-08-17T16:30:50.297Z","dependency_job_id":null,"html_url":"https://github.com/kenwheeler/mcfly","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenwheeler%2Fmcfly","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenwheeler%2Fmcfly/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenwheeler%2Fmcfly/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kenwheeler%2Fmcfly/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kenwheeler","download_url":"https://codeload.github.com/kenwheeler/mcfly/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464891,"owners_count":22075570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-07-30T17:01:32.830Z","updated_at":"2025-05-16T04:03:50.268Z","avatar_url":"https://github.com/kenwheeler.png","language":"JavaScript","readme":"# McFly\nFlux Architecture Made Easy\n\n*What is McFly?*\n\nWhen writing ReactJS apps, it is enormously helpful to use Facebook's Flux architecture. It truly complements ReactJS' unidirectional data flow model. Facebook's Flux library provides a Dispatcher, and some examples of how to write Actions and Stores. However, there are no helpers for Action \u0026 Store creation, and Stores require 3rd party eventing.\n\nMcFly is a library that provides all 3 components of Flux architecture, using Facebook's Dispatcher, and providing factories for Actions \u0026 Stores.\n\n### Demo\n\nCheck out this JSFiddle Demo to see how McFly can work for you:\n\n[http://jsfiddle.net/6rauuetb/](http://jsfiddle.net/6rauuetb/)\n\n### Download\n\nMcFly can be downloaded from:\n\n[http://kenwheeler.github.io/mcfly/McFly.js](http://kenwheeler.github.io/mcfly/McFly.js)\n\n### Dispatcher\n\nMcFly uses Facebook Flux's dispatcher. When McFly is instantiated, a single dispatcher instance is created and can be accessed like shown below:\n\n```javascript\nvar mcFly = new McFly();\n\nreturn mcFly.dispatcher;\n```\nIn fact, all created Actions \u0026 Stores are also stored on the McFly object as `actions` and `stores` respectively.\n\n### Stores\n\nMcFly has a **createStore** helper method that creates an instance of a Store. Store instances have been merged with EventEmitter and come with **emitChange**, **addChangeListener** and **removeChangeListener** methods built in.\n\nWhen a store is created, its methods parameter specifies what public methods should be added to the Store object. Every store is automatically registered with the Dispatcher and the `dispatcherID` is stored on the Store object itself, for use in `waitFor` methods.\n\nCreating a store with McFly looks like this:\n\n```javascript\nvar _todos = [];\n\nfunction addTodo(text) {\n  _todos.push(text);\n}\n\nvar TodoStore = mcFly.createStore({\n\ngetTodos: function() {\n  return _todos;\n}\n\n}, function(payload){\n  var needsUpdate = false;\n\n  switch(payload.actionType) {\n  case 'ADD_TODO':\n    addTodo(payload.text);\n    needsUpdate = true;\n    break;\n  }\n\n  if (needsUpdate) {\n    TodoStore.emitChange();\n  }\n\n});\n```\n\nUse `Dispatcher.waitFor` if you need to ensure handlers from other stores run first.\n\n```javascript\nvar mcFly = new McFly();\nvar Dispatcher = mcFly.dispatcher;\nvar OtherStore = require('../stores/OtherStore');\nvar _todos = [];\n\nfunction addTodo(text, someValue) {\n  _todos.push({ text: text, someValue: someValue });\n}\n\n ...\n\n    case 'ADD_TODO':\n      Dispatcher.waitFor([OtherStore.dispatcherID]);\n      var someValue = OtherStore.getSomeValue();\n      addTodo(payload.text, someValue);\n      break;\n\n ...\n```\n\nStores are also created a with a ReactJS component mixin that adds and removes store listeners that call a **storeDidChange** component method.\n\nAdding Store eventing to your component is as easy as:\n\n```javascript\nvar TodoStore = require('../stores/TodoStore');\n\nvar TodoApp = React.createClass({\n\n  mixins: [TodoStore.mixin],\n\n  ...\n```\n### Actions\n\nMcFly's **createActions** method creates an Action Creator object with the supplied singleton object. The supplied methods are inserted into a Dispatcher.dispatch call and returned with their original name, so that when you call these methods, the dispatch takes place automatically.\n\nAdding actions to your app looks like this:\n\n```javascript\nvar mcFly = require('../controller/mcFly');\n\nvar TodoActions = mcFly.createActions({\n  addTodo: function(text) {\n    return {\n      actionType: 'ADD_TODO',\n      text: text\n    }\n  }\n});\n```\n\nAll actions methods return promise objects so that components can respond to long functions. The promise will be resolved with no parameters as information should travel through the dispatcher and stores. To reject the promise, return a falsy value from the action's method. The dispatcher will not be called if the returned value is falsy or has no actionType.\n\nYou can see an example of how to use this functionality here:\n\nhttp://jsfiddle.net/thekenwheeler/32hgqsxt/\n\n## API\n\n### McFly\n\n```javascript\nvar McFly = require('mcfly');\n\nvar mcFly = new McFly();\n```\n\n### createStore\n\n```javascript\n/*\n * @param {object} methods - Public methods for Store instance\n * @param {function} callback - Callback method for Dispatcher dispatches\n * @return {object} - Returns instance of Store\n */\n```\n\n### createActions\n\n```javascript\n/**\n * @param {object} actions - Object with methods to create actions with\n * @constructor\n */\n```\n","funding_links":[],"categories":["JavaScript","Awesome React","Web Development"],"sub_categories":["Tools","Angular"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenwheeler%2Fmcfly","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkenwheeler%2Fmcfly","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkenwheeler%2Fmcfly/lists"}