		{
		"name": "reflux",
		"version": "0.0.3",
		"version": "0.0.4",
		"description": "A simple library for uni-directional dataflow application architecture inspired by ReactJS Flux",
		@@ -5,0 +5,0 @@ "main": "src/index.js",

126

README.md

		@@ -5,20 +5,57 @@ # Reflux

		You can read an overview of Flux [here](http://facebook.github.io/react/docs/flux-overview.html), however the gist of it is to introduce a more functional programming style architecture by eschewing MVC like pattern and adopting a single data flow pattern.

		```
		╔═════════╗ ╔════════╗ ╔═════════════════╗
		║ Actions ║──────>║ Stores ║──────>║ View Components ║
		╚═════════╝ ╚════════╝ ╚═════════════════╝
		^ │
		└──────────────────────────────────────┘

		```

		The 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 signalling to the stores through the actions available.

		The goal of the project is to get this architecture easily up and running in your web application, both client-side or server-side. There are some differences between how this project works and how Facebook's proposed Flux architecture works:

		* Instead of a singleton dispatcher, every action is a dispatcher by themselves
		* No more type checking with strings, just let the stores listen to actions and don't worry!
		* Data stores are also dispatchers and stores may listen for changes on other stores

		## Installation

		You can currently install the package as a npm package:
		You can currently install the package as a npm package or bower.

		### NPM

		The following command installs reflux as an npm package:

		npm install reflux

		### Bower

		The following command installs reflux as a bower component that can be used in the browser:

		bower install reflux

		It will also download lodash as a dependency.

		## Usage

		Create an action by calling `createAction`.
		For a full example check the [`test/index.js`](test/index.js) file.

		### Creating actions

		Create an action by calling `Reflux.createAction`.

		```javascript
		var Reflux = require('reflux');

		var statusUpdate = Reflux.createAction();
		```

		Create a data store by passing a definition object to `createStore`.
		It is as simple as that.

		### Creating data stores

		Create a data store much like ReactJS's own `React.createClass` by passing a definition object to `Reflux.createStore`. You may set up all action listeners in the `init` function and register them by calling the store's own `listenTo` function.

		```javascript
		@@ -38,2 +75,4 @@ // Creates a DataStore
		var status = flag ? 'ONLINE' : 'OFFLINE';

		// Pass on to listeners
		this.trigger(status);
		@@ -45,4 +84,8 @@ }

		In your component, register to listen to your data store like this:
		In the above example, whenever the action is called, the store's `output` callback will be called with whatever parameters was sent in the action. E.g. if the action is called as `statusUpdate(true)` then the flag argument in `output` function is `true`.

		### Listening to changes in data store

		In your component, register to listen to changes in your data store like this:

		```javascript
		@@ -66,27 +109,68 @@ // Fairly simple view component that outputs to console
		statusUpdate(false);
		```

		/**
		* Will output:
		* status: ONLINE
		* status: OFFLINE
		*/
		With the setup above this will output the following in the console:

		```
		status: ONLINE
		status: OFFLINE
		```

		See `test/index.js` for more example on how to use the package.
		#### ReactJS example

		## License
		Register your component to listen for changes in your data stores, preferably in the `componentDidMount` [lifecycle method](http://facebook.github.io/react/docs/component-specs.html) and unregister in the `componentWillUnmount`, like this:

		### [BSD 3-Clause License](http://opensource.org/licenses/BSD-3-Clause)
		```javascript
		var Status = React.createClass({
		initialize: function() { },
		onStatusChange: function(status) {
		this.setState({
		currentStatus: status
		});
		},
		componentDidMount: function() {
		this.unsubscribe = statusStore.listen(this.onStatusChange);
		},
		componentWillUnmount: function() {
		this.unsubscribe();
		},
		render: function() {
		// render specifics
		}
		});
		```

		Copyright (c) 2014, Mikael Brassman
		All rights reserved.
		### Listening to changes in other data stores (aggregate data stores)

		Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
		A store may listen to another store's change, making it possible to safetly chain stores for aggregated data without affecting other parts of the application. A store may listen to other stores using the same `listenTo` function as with actions:

		1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
		```javascript
		// Creates a DataStore that listens to statusStore
		var statusHistoryStore = Reflux.createStore({
		init: function() {

		2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
		// Register statusStore's changes
		this.listenTo(statusStore, this.output);

		3. Neither the name of the copyright holder nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
		this.history = [];
		},

		THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
		// Callback
		output: function(statusString) {
		this.history.push({
		date: new Date(),
		status: statusString
		});
		// Pass the data on to listeners
		this.trigger(this.history);
		}

		});
		```


		## License

		This project is licensed under [BSD 3-Clause License](http://opensource.org/licenses/BSD-3-Clause). Copyright (c) 2014, Mikael Brassman.

		For more information about the license for this particular project [read the LICENSE.md file](LICENSE.md).

test/creatingActions.spec.js

		@@ -22,3 +22,3 @@ var assert = require('chai').assert,
		beforeEach(function() {
		promise = Q.promise(function(resolve, reject) {
		promise = Q.promise(function(resolve) {
		action.listen(function() {
		@@ -43,3 +43,3 @@ resolve(Array.prototype.slice.call(arguments, 0));
		done();
		});
		}).catch(done);
		});
		@@ -46,0 +46,0 @@

test/creatingStores.spec.js→test/creatingStores.spec.js

reflux - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics