fluxury - npm Package Compare versions

Comparing version 0.2.16 to 0.2.17

package.json

 {
   "name": "fluxury",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "description": "Add luxury sugar to simplify implementing Facebook's flavor of Flux architecture.",
@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

@@ -128,15 +128,68 @@ # fluxury
 
+## Put it all together
 
+```js
+var React = require('react');
+var {dispatch, createStore, createActions} = require('fluxury');
+var {INC, DEC} = createActions('INC', 'DEC');
+
+var countStore = Fluxury.createStore('CountStore', 0, function(state, action) {
+  switch (action.type) {
+    case INC:
+      return state+1;
+    case DEC:
+      return state-1;
+    default:
+      return state;
+  }
+});
+
+var MyComponent = React.createClass({
+
+  componentDidMount: function() {
+    this.token = countStore.addListener( this.handleStoreChange );
+  },
+
+  componentWillUnmount: function() {
+    this.token.remove();
+  },
+
+  handleStoreChange: function() {
+    this.setState({ count: countStore.getState() })
+  },
+
+  handleUpClick: function() {
+    /* Call dispatch to submit the action to the stores */
+    dispatch(INC)
+  },
+
+  handleDownClick: function() {
+    /* Call dispatch to submit the action to the stores */
+    dispatch(DEC)
+  },
+
+  render: function() {
+    return (
+      <div>
+        <p>{this.state.count}</p>
+        <button onClick={this.handleUpClick}>+1</button>
+        <button onClick={this.handleDownClick}>-1</button>
+      </div>
+    );
+  }
+
+});
+
+module.exports = MyComponent;
+
+```
+
 ## MapStore Example
 
-For simple projects with limited datasets you may be best suited to use a
-single store for the entire application. After all, you can nest the object as
-deeply as needed to organize and isolate your data.
+A simple store that accumulates  data on each `SET` action.
 
 ```js
 var {dispatch, createStore, createActions } = require('fluxury');
+var {SET} = createActions('SET');
 
-var actions = createActions('SET'),
-    SET = actions.SET;
-
 var store = createStore('MapStore', {}, function(state, action) {
@@ -143,0 +196,0 @@ switch (action.type) {

test.js

@@ -5,3 +5,3 @@ var test = require('tape');
   var Fluxury = require('./lib/index.js')
-  t.plan(15)
+  t.plan(16)
 
@@ -29,2 +29,3 @@ t.equal(typeof Fluxury, 'object')
       case SET:
+        // combine both objects into a single new object
         return assign({}, state, action.data)
@@ -36,2 +37,5 @@ default:
 
+  var listenerCount = 0;
+  store.addListener( () => listenerCount++ )
+
   Fluxury.dispatch(SET, { foo: 1, bar: 2 })
@@ -46,2 +50,5 @@ t.deepEqual(store.getState(), { foo: 1, bar: 2 })
 
+  // ensure that callback is invoked correct number of times
+  t.equal(listenerCount, 4);
+
   var store = Fluxury.createStore('CountStore', 0, function(state, action) {
@@ -48,0 +55,0 @@ switch (action.type) {

No alert changes

Improved metrics

Total package byte prevSize

12407

increased by11.4%

Number of package files

7

increased by16.67%

Lines of code

163

increased by3.16%

Number of lines in readme file

217

increased by32.32%

No dependency changes