Provide accessible data

README.md

@@ -64,27 +64,21 @@ provided by `redux-falcor`. This should feel familiar to `react-redux`.
 ```js
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { reduxFalcor } from 'redux-falcor';
+import { reduxFalcor, updateFalcorCache } from 'redux-falcor';
 import App from './App';
 
 class AppContainer extends Component {
-  fetchFalcorDeps() {
-    return this.props.falcor.get(
-      ['currentUser', App.queries.user()],
-    );
-  }
 
   handleClick(event) {
     event.preventDefault();
-
-    this.props.falcor.call(['some', 'path']).then(() => {
-      console.log('Some path called');
-    }).catch(() => {
-      console.error('Some path failed');
+    this.props.getData().catch(() => {
+      console.error('Some path failed')
     });
   }
 
   render() {
+    const { falcor } = this.props;
+    console.log(falcor.getCache());
     return (
       <App
         handleClick={this.handleClick.bind(this)}
@@ -99,27 +93,66 @@ function mapStateToProps(state) {
     currentUser: state.falcor.currentUser || {}
   };
 }
+function mapDispatchToProps(dispatch, props) {
+  return {
+    getData(){
+      const { falcor } = props;
+      return falcor.call(['some', 'path']).then(() => {
+        return dispatch(updateFalcorCache(falcor.getCache()));
+      });
+    }
+  };
+}
 
-export default connect(
-  mapStateToProps,
-)(reduxFalcor(AppContainer));
-```
+export default reduxFalcor()(connect(mapStateToProps)(AppContainer));
+
+/**
+ * Example with decorators
+ */
+@reduxFalcor()
+@connect((state) => ({
+  currentUser: state.falcor.currentUser || {}
+}), (dispatch, props) => ({
+  getData(){
+    const { falcor } = props
+    return falcor.call(['some', 'path']).then(() => {
+      return dispatch(updateFalcorCache(falcor.getCache()));
+    });
+  }  
+})
+export default class AppContainer extends Component {
 
-You can see `reduxFalcor` has done two things for us. First off, our falcor
-model has been provided to our Component via the `falcor` prop. This is useful
-for creating event handlers that call out to our `falcor-router`.
+  handleClick(event) {
+    event.preventDefault();
+    this.props.getData().catch(() => {
+      console.error('Some path failed')
+    });
+  }
+
+  render() {
+    const { falcor } = this.props;
+    console.log(falcor.getCache());
+    return (
+      <App
+        handleClick={this.handleClick.bind(this)}
+        currentUser={this.props.currentUser}
+      />
+    );
+  }
+}
+```
 
-Secondly, if we define the method `fetchFalcorDeps`, `redux-falcor` will
-automatically call that function when the component is first mounted to the DOM
-as well as whenever the falcor cache has been invalidated. This method should
-return a promise that fetches all of our falcor dependencies for this
-component.
+You can see `reduxFalcor` has provided our falcor model to the component via the `falcor` prop.
+This is useful for calling our `falcor-router` which provides the data to dispatch `updateFalcorCache` actions.
+Its values can then directly accessed from the falcor cache which keeps them in sync with the store.
 
 **Warning**
 
 Because falcor is intrinsically asynchronous your code can not rely on any one
 piece of state being present when rendering. In the example above we give
 a default for `currentUser` when we haven't fetched that piece of data yet.
+To solve this issue its best to load the data before and pass them as props.
+For example checkout [redial](https://github.com/markdalgleish/redial).
 
 ### Thanks
 

src/components/createStore.js

@@ -1,4 +1,4 @@
-import { update } from './duck';
+import { updateFalcorCache } from './duck';
 
 export default function createStore(reduxStore) {
   const listeners = [];
@@ -17,7 +17,7 @@ export default function createStore(reduxStore) {
 
   function trigger(cache) {
     // Update the redux with the changes
-    reduxStore.dispatch(update(cache));
+    reduxStore.dispatch(updateFalcorCache(cache));
 
     // Trigger listeners to refetch possible invalidated data
     listeners.slice().forEach((listener) => listener());

src/components/duck.js

@@ -9,9 +9,9 @@ export default function reduxFalcorReducer(state = {}, action) {
   }
 }
 
-export function update(falcorCache) {
+export function updateFalcorCache(falcorCache) {
   return {
     type: UPDATE,
-    payload: falcorCache,
+    payload: falcorCache
   };
 }

src/components/reduxFalcor.js

@@ -6,78 +6,44 @@ function getDisplayName(WrappedComponent) {
   return WrappedComponent.displayName || WrappedComponent.name || 'Component';
 }
 
-function noop() {}
-
-export default function reduxFalcor(WrappedComponent) {
-  class ReduxFalcor extends Component {
-    constructor(props, context) {
-      super(props, context);
-
-      this.falcor = props.falcor || context.falcor;
-      this.falcorStore = props.falcorStore || context.falcorStore;
-
-      invariant(this.falcorStore,
-        `Could not find "falcorStore" in either the context or ` +
-        `props of "${this.constructor.displayName}". ` +
-        `Either wrap the root component in a <FalcorProvider>, ` +
-        `or explicitly pass "falcorStore" as a prop to "${this.constructor.displayName}".`
-      );
-    }
-
-    componentDidMount() {
-      this.trySubscribe();
-    }
-
-    componentWillUnmount() {
-      this.tryUnsubscribe();
-    }
-
-    trySubscribe() {
-      if (!this.unsubscribe) {
-        this.unsubscribe = this.falcorStore.subscribe(::this.handleChange);
-        this.handleChange();
+export default function reduxFalcor() {
+
+  return function wrapWithFalcor (WrappedComponent) {
+    class ReduxFalcor extends Component {
+      constructor(props, context) {
+        super(props, context);
+
+        this.falcor = props.falcor || context.falcor;
+        this.falcorStore = props.falcorStore || context.falcorStore;
+
+        invariant(this.falcorStore,
+          `Could not find "falcorStore" in either the context or ` +
+          `props of "${this.constructor.displayName}". ` +
+          `Either wrap the root component in a <FalcorProvider>, ` +
+          `or explicitly pass "falcorStore" as a prop to "${this.constructor.displayName}".`
+        );
       }
-    }
-
-    handleChange() {
-      const { wrappedInstance } = this.refs;
-
-      if (!this.unsubscribe) return;
-      if (!(typeof wrappedInstance.fetchFalcorDeps === 'function')) return;
-
-      wrappedInstance.fetchFalcorDeps().then(noop);
-    }
 
-    tryUnsubscribe() {
-      if (this.unsubscribe) {
-        this.unsubscribe();
-        this.unsubscribe = null;
+      render() {
+        return (
+          <WrappedComponent {...this.props} falcor={this.falcor}/>
+        );
       }
     }
 
-    render() {
-      return (
-        <WrappedComponent
-          {...this.props}
-          falcor={this.falcor}
-          ref="wrappedInstance"
-        />
-      );
-    }
-  }
+    ReduxFalcor.displayName = `ReduxFalcor(${getDisplayName(WrappedComponent)})`;
+    ReduxFalcor.WrappedComponent = WrappedComponent;
 
-  ReduxFalcor.displayName = `ReduxFalcor(${getDisplayName(WrappedComponent)})`;
-  ReduxFalcor.WrappedComponent = WrappedComponent;
+    ReduxFalcor.propTypes = {
+      falcorStore: PropTypes.object,
+      falcor: PropTypes.object
+    };
 
-  ReduxFalcor.propTypes = {
-    falcorStore: PropTypes.object,
-    falcor: PropTypes.object,
-  };
+    ReduxFalcor.contextTypes = {
+      falcorStore: PropTypes.object.isRequired,
+      falcor: PropTypes.object.isRequired
+    };
 
-  ReduxFalcor.contextTypes = {
-    falcorStore: PropTypes.object.isRequired,
-    falcor: PropTypes.object.isRequired,
-  };
-
-  return hoistStatics(ReduxFalcor, WrappedComponent);
+    return hoistStatics(ReduxFalcor, WrappedComponent);
+  }
 }

src/index.js

@@ -1,3 +1,3 @@
-export { default as reducer } from './components/duck';
+export { default as reducer, updateFalcorCache } from './components/duck';
 export { default as FalcorProvider } from './components/FalcorProvider';
 export { default as reduxFalcor } from './components/reduxFalcor';