{"id":13437685,"url":"https://github.com/reflux/refluxjs","last_synced_at":"2026-04-02T02:17:30.221Z","repository":{"id":44246271,"uuid":"21397581","full_name":"reflux/refluxjs","owner":"reflux","description":"A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux","archived":false,"fork":false,"pushed_at":"2019-11-21T14:46:02.000Z","size":739,"stargazers_count":5348,"open_issues_count":29,"forks_count":327,"subscribers_count":134,"default_branch":"master","last_synced_at":"2025-05-11T15:15:14.233Z","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":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/reflux.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-07-01T18:05:30.000Z","updated_at":"2025-05-02T14:33:55.000Z","dependencies_parsed_at":"2022-09-06T23:30:24.661Z","dependency_job_id":null,"html_url":"https://github.com/reflux/refluxjs","commit_stats":null,"previous_names":["spoike/reflux","spoike/refluxjs"],"tags_count":49,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reflux%2Frefluxjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reflux%2Frefluxjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reflux%2Frefluxjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reflux%2Frefluxjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reflux","download_url":"https://codeload.github.com/reflux/refluxjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253584656,"owners_count":21931550,"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-31T03:00:59.290Z","updated_at":"2025-12-12T03:02:32.696Z","avatar_url":"https://github.com/reflux.png","language":"JavaScript","readme":"\n# RefluxJS\n\nA simple library for unidirectional dataflow architecture inspired by ReactJS [Flux](http://facebook.github.io/react/blog/2014/05/06/flux.html).\n\n[![NPM Version][npm-image]][npm-url]\n[![Bower Version][bower-image]][bower-url]\n[![Build Status][travis-image]][travis-url]\n[![NPM Downloads][downloads-image]][npm-url]\n\n[![Sauce Test Status](https://saucelabs.com/browser-matrix/refluxjs.svg)](https://saucelabs.com/u/refluxjs)\n\n--------------------\n\n## Installation\n\nYou can currently install the package as a npm package, a bower component, or import it from a CDN.\n\n#### NPM\n\nThe following command installs RefluxJS as a npm package:\n\n    npm install reflux\n\nThen, in your script, you can gain a reference to RefluxJS like so: `var Reflux = require('reflux');`\n\n#### Bower\n\nThe following command installs reflux as a bower component that can be used in the browser:\n\n    bower install reflux\n\nThen the files may be imported into your html file via `bower_components/reflux/dist/reflux.js` or `bower_components/reflux/dist/reflux.min.js`. At that point a `Reflux` variable will be globally available to you. It is suggested that you import RefluxJS after React.\n\n#### CDN\n\nRefluxJS is available at [jsdelivr](http://www.jsdelivr.com/#!refluxjs).\n\nYou may import the CDN files directly through a script tag. At that point a `Reflux` variable will be globally available to you. It is suggested that you import RefluxJS after React.\n\n--------------------------------\n\n## Overview\n\nThe main function of Reflux is to introduce a more functional programming style architecture by eschewing MVC like pattern and adopting a single data flow pattern.\n\n```\n+---------+       +--------+       +-----------------+\n¦ Actions ¦------\u003e¦ Stores ¦------\u003e¦ View Components ¦\n+---------+       +--------+       +-----------------+\n     ^                                      ¦\n     +--------------------------------------+\n\n```\n\nThe pattern is composed of actions and data stores, where actions initiate new data to pass through data stores before coming back to the view components again. If a view component has an event that needs to make a change in the application's data stores, they need to do so by signaling to the stores through the actions available.\n\n--------------------------------\n\n## Usage\n\nFor usage, you need to create actions which can be called from React components. Those actions are listened to by stores which hold and update data. In turn those stores are hooked up to React components and set state within them as it is updated within the store.\n\nTherefore the 3 main concepts to know are:\n\n1. [creating actions](#creating-actions)\n2. [creating stores](#creating-stores)\n3. [hooking stores to React components](#hooking-stores-to-components)\n\n--------------------------------\n\n## Creating Actions\n\nCreate an action by calling `Reflux.createAction` with an optional options object.\n\n```javascript\nvar statusUpdate = Reflux.createAction();\n```\n\nAn action is a [function object](http://en.wikipedia.org/wiki/Function_object) that can be invoked like any other function.\n\n```javascript\nstatusUpdate(data); // Invokes the action statusUpdate\n```\n\nThere is also a convenience function for creating multiple actions.\n\n```javascript\nvar Actions = Reflux.createActions([\n    \"statusUpdate\",\n    \"statusEdited\",\n    \"statusAdded\"\n]);\n\n// Actions object now contains the actions\n// with the names given in the array above\n// that may be invoked as usual\n\nActions.statusUpdate();\n```\n\n#### More on Actions:\nActions can also:\n- load files asynchronously with child actions\n- do preEmit and shouldEmit checking\n- have many shortcuts for easy usage\n\nSee [Reflux Action Documentation](docs/actions/) for more.\n\n------------------\n\n## Creating Stores\n\nCreate a data store much like ReactJS's own `React.Component` by creating a class extending `Reflux.Store`. The store has a `state` property much like a component, and uses `setState` like a component as well. You may set up all action listeners in the `constructor` and register them by calling the store's own `listenTo` function.\n\n```javascript\nclass StatusStore extends Reflux.Store\n{\n    constructor()\n    {\n        super();\n        this.state = {flag:'OFFLINE'}; // \u003c- set store's default state much like in React\n        this.listenTo(statusUpdate, this.onStatusUpdate); // listen to the statusUpdate action\n    }\n\n    onStatusUpdate(status)\n    {\n        var newFlag = status ? 'ONLINE' : 'OFFLINE';\n        this.setState({flag:newFlag});\n    }\n}\n```\n\nIn the above example, whenever the action `statusUpdate` is called, the store's `onStatusUpdate` callback will be called with whatever parameters were sent in the action. E.g. if the action is called as `statusUpdate(true)` then the `status` argument in the `onStatusUpdate` function is `true`.\n\nStores also integrate easily with sets of actions via things like `this.listenables`. When an actions object (or an Array of multiple actions objects) is applied to `this.listenables` you may automatically add listeners simply by naming convention. Just name the functions either after the action name (such as `actionName`, or the camelcased action name preceded with \"on\", (such as `onActionName`).\n\n```javascript\nvar Actions = Reflux.createActions(['firstAction', 'secondAction']);\n\nclass StatusStore extends Reflux.Store\n{\n    constructor()\n    {\n        super();\n        this.listenables = Actions;\n    }\n\n    onFirstAction()\n    {\n        // calls on Actions.firstAction();\n    }\n\n\tonSecondAction()\n\t{\n\t\t// calls on Actions.secondAction();\n\t}\n}\n```\n\n#### More on Stores:\n\nReflux stores are very powerful. They can even do things like contribute to a global state that can be read and set for partial or full-state time-travel, debugging, etc.\n\nSee [Reflux Store Documentation](docs/stores/) to learn more about stores.\n\n--------------------------\n\n## Hooking Stores to Components\n\nOnce you've created actions and stores, now the last step in working RefluxJS is to hook those stores to a React component.\n\nThis is done as simply as extending `Reflux.Component` instead of `React.Component` and setting the store(s) to use. `Reflux.Component` itself extends `React.Component`, so you use them the exact same way. The only difference is that `Reflux.Component` allows you to set stores for the component to get state from:\n\n```javascript\nclass MyComponent extends Reflux.Component\n{\n    constructor(props)\n    {\n        super(props);\n        this.state = {}; // our store will add its own state to the component's\n        this.store = StatusStore; // \u003c- just assign the store class itself\n    }\n\n    render()\n    {\n        var flag = this.state.flag; // \u003c- flag is mixed in from the StatusStore\n        return \u003cdiv\u003eUser is {flag}\u003c/div\u003e\n    }\n}\n```\n\nWhen the component mounts it will either create a singleton instance of `StatusStore` (if one isn't already made) or use an already made singleton (if it was already created by another component that uses the store).\n\nOf important note is that you can:\n\n1. Set multiple stores by setting `this.stores` (the plural) and setting it to an Array of store classes.\n2. Set a `this.storeKeys` Array to restrict only certain parts of the store being mixed into the component state.\n\nThere is also a `mapStoreToState` method in the documentation for those that want absolute control over how a store's state is mapped to a component.\n\n```javascript\nclass MyComponent extends Reflux.Component\n{\n    constructor(props)\n    {\n        super(props);\n        this.state = {type:'admin'}; // \u003c- note that we can still use normal state\n        this.stores = [StatusStore, AnotherStore];\n        this.storeKeys = ['flag', 'info'];\n    }\n\n    render()\n    {\n        var flag = this.state.flag;\n        var info = this.state.info;\n        var type = this.state.type;\n        return \u003cdiv\u003eUser is {flag}, info: {info}, type: {type}\u003c/div\u003e\n    }\n}\n```\n\nThe above will mix in properties from the state of both `StatusStore` and `AnotherStore`. However, because of `this.storeKeys` it will only mix in the properties `flag` and `info` from them. So any other properties within those stores will not get mixed in. So even if a store contained a `type` property in its state it would not get mixed in, and the `type` value we set as a normal part of the component state is safe.\n\n#### More on using Reflux style components:\n\nReflux's simple and intuitive way of integrating stores into components is easy and powerful. You can aggregate stores together on a component-by-component basis, filter which parts of the stores come through and which don't, or even do a detailed manual mapping of exactly how you want the state from stores to map to the state in a particular component.\n\nSee [Reflux Style Component Documentation](docs/components/) to learn more.\n\n-----------------------------------------\n\n## Documentation\n\nWhat you've just read is a \"view from 10,000 feet\" type overview of getting started with RefluxJS. For serious learning see the [documentation](docs/).\n\n[npm-image]: http://img.shields.io/npm/v/reflux.svg\n[downloads-image]: http://img.shields.io/npm/dm/reflux.svg\n[dependencies-image]: http://img.shields.io/david/reflux/refluxjs.svg\n[npm-url]: https://www.npmjs.org/package/reflux\n[bower-image]: http://img.shields.io/bower/v/reflux.svg\n[bower-url]: http://bower.io/search/?q=reflux\n[travis-image]: http://img.shields.io/travis/reflux/refluxjs/master.svg\n[travis-url]: https://travis-ci.org/reflux/refluxjs\n[gratipay-image]: http://img.shields.io/gratipay/spoike.svg\n[gratipay-url]: https://gratipay.com/spoike/\n[thinkful-image]: https://tf-assets-staging.s3.amazonaws.com/badges/thinkful_repo_badge.svg\n[thinkful-url]: http://start.thinkful.com/react/?utm_source=github\u0026utm_medium=badge\u0026utm_campaign=reflux\n","funding_links":[],"categories":["JavaScript","Uncategorized","Code Design","react","Javascript"],"sub_categories":["Uncategorized","Data Store"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freflux%2Frefluxjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freflux%2Frefluxjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freflux%2Frefluxjs/lists"}