Direct state in context

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Change Log
 
 ## [Unreleased]
+### Changed
+- Direct state context
+  - No breaking change in API, but it may behave differently
+- Support custom context
 
 ## [3.0.0] - 2019-05-18
 ### Changed

dist/ReduxProvider.js

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReduxProvider = exports.defaultContext = exports.createCustomContext = void 0;
+
+var _react = require("react");
+
+var _utils = require("./utils");
+
+// -------------------------------------------------------
+// context
+// -------------------------------------------------------
+var warningObject = {
+  get state() {
+    throw new Error('Please use <TrackedProvider ...>');
+  },
+
+  get dispatch() {
+    throw new Error('Please use <TrackedProvider ...>');
+  },
+
+  get subscribe() {
+    throw new Error('Please use <TrackedProvider ...>');
+  }
+
+};
+
+var calculateChangedBits = function calculateChangedBits(a, b) {
+  return a.dispatch !== b.dispatch || a.subscribe !== b.subscribe ? 1 : 0;
+};
+
+var createCustomContext = function createCustomContext() {
+  var w = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : warningObject;
+  var c = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : calculateChangedBits;
+  return (0, _react.createContext)(w, c);
+};
+
+exports.createCustomContext = createCustomContext;
+var defaultContext = createCustomContext(); // -------------------------------------------------------
+// provider
+// -------------------------------------------------------
+
+exports.defaultContext = defaultContext;
+
+var ReduxProvider = function ReduxProvider(_ref) {
+  var store = _ref.store,
+      _ref$customContext = _ref.customContext,
+      customContext = _ref$customContext === void 0 ? defaultContext : _ref$customContext,
+      children = _ref.children;
+  var forceUpdate = (0, _utils.useForceUpdate)();
+  var state = store.getState();
+  var listeners = (0, _react.useRef)([]);
+  (0, _utils.useIsomorphicLayoutEffect)(function () {
+    listeners.current.forEach(function (listener) {
+      return listener(state);
+    });
+  }, [state]);
+  var subscribe = (0, _react.useCallback)(function (listener) {
+    listeners.current.push(listener);
+
+    var unsubscribe = function unsubscribe() {
+      var index = listeners.current.indexOf(listener);
+      listeners.current.splice(index, 1);
+    }; // run once in case the state is already changed
+
+
+    listener(store.getState());
+    return unsubscribe;
+  }, [store]);
+  (0, _react.useEffect)(function () {
+    var unsubscribe = store.subscribe(function () {
+      forceUpdate();
+    });
+    return unsubscribe;
+  }, [store, forceUpdate]);
+  return (0, _react.createElement)(customContext.Provider, {
+    value: {
+      state: state,
+      dispatch: store.dispatch,
+      subscribe: subscribe
+    }
+  }, children);
+};
+
+exports.ReduxProvider = ReduxProvider;

dist/index.js

@@ -6,7 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "ReduxProvider", {
   enumerable: true,
   get: function get() {
-    return _provider.ReduxProvider;
+    return _ReduxProvider.ReduxProvider;
+  }
+});
+Object.defineProperty(exports, "createCustomContext", {
+  enumerable: true,
+  get: function get() {
+    return _ReduxProvider.createCustomContext;
   }
 });
 Object.defineProperty(exports, "useReduxDispatch", {
@@ -40,7 +46,7 @@ Object.defineProperty(exports, "useReduxSelectors", {
   }
 });
 
-var _provider = require("./provider");
+var _ReduxProvider = require("./ReduxProvider");
 
 var _useReduxDispatch = require("./useReduxDispatch");
 

dist/useReduxDispatch.js

@@ -7,11 +7,17 @@ exports.useReduxDispatch = void 0;
 
 var _react = require("react");
 
-var _provider = require("./provider");
+var _ReduxProvider = require("./ReduxProvider");
 
 var useReduxDispatch = function useReduxDispatch() {
-  var store = (0, _react.useContext)(_provider.ReduxStoreContext);
-  return store.dispatch;
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _opts$customContext = opts.customContext,
+      customContext = _opts$customContext === void 0 ? _ReduxProvider.defaultContext : _opts$customContext;
+
+  var _useContext = (0, _react.useContext)(customContext),
+      dispatch = _useContext.dispatch;
+
+  return dispatch;
 };
 
 exports.useReduxDispatch = useReduxDispatch;

dist/useReduxSelectors.js

@@ -11,7 +11,7 @@ var _memoizeState = _interopRequireDefault(require("memoize-state"));
 
 var _withKnownUsage = require("with-known-usage");
 
-var _provider = require("./provider");
+var _ReduxProvider = require("./ReduxProvider");
 
 var _utils = require("./utils");
 
@@ -62,10 +62,15 @@ var runSelector = function runSelector(state, selector) {
 };
 
 var useReduxSelectors = function useReduxSelectors(selectorMap) {
-  var forceUpdate = (0, _utils.useForceUpdate)(); // redux store&state
+  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _opts$customContext = opts.customContext,
+      customContext = _opts$customContext === void 0 ? _ReduxProvider.defaultContext : _opts$customContext;
+  var forceUpdate = (0, _utils.useForceUpdate)(); // redux state
+
+  var _useContext = (0, _react.useContext)(customContext),
+      state = _useContext.state,
+      subscribe = _useContext.subscribe; // mapped result
 
-  var store = (0, _react.useContext)(_provider.ReduxStoreContext);
-  var state = store.getState(); // mapped result
 
   var keys = Object.keys(selectorMap);
   var mapped = createMap(keys, function (key) {
@@ -85,9 +90,8 @@ var useReduxSelectors = function useReduxSelectors(selectorMap) {
   }); // subscription
 
   (0, _react.useEffect)(function () {
-    var callback = function callback() {
+    var callback = function callback(nextState) {
       try {
-        var nextState = store.getState();
         var changed = false;
         var nextMapped = createMap(lastTracked.current.keys, function (key) {
           var lastResult = lastTracked.current.mapped[key];
@@ -109,13 +113,11 @@ var useReduxSelectors = function useReduxSelectors(selectorMap) {
         // detect erorr (probably stale props)
         forceUpdate();
       }
-    }; // run once in case the state is already changed
-
+    };
 
-    callback();
-    var unsubscribe = store.subscribe(callback);
+    var unsubscribe = subscribe(callback);
     return unsubscribe;
-  }, [store, forceUpdate]);
+  }, [subscribe, forceUpdate]);
   return trapped.proxy;
 };
 

dist/useReduxState.js

@@ -7,17 +7,22 @@ exports.useReduxState = void 0;
 
 var _react = require("react");
 
-var _provider = require("./provider");
+var _ReduxProvider = require("./ReduxProvider");
 
 var _utils = require("./utils");
 
 var _deepProxy = require("./deepProxy");
 
 var useReduxState = function useReduxState() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _opts$customContext = opts.customContext,
+      customContext = _opts$customContext === void 0 ? _ReduxProvider.defaultContext : _opts$customContext;
   var forceUpdate = (0, _utils.useForceUpdate)();
-  var store = (0, _react.useContext)(_provider.ReduxStoreContext);
-  var state = store.getState();
+
+  var _useContext = (0, _react.useContext)(customContext),
+      state = _useContext.state,
+      subscribe = _useContext.subscribe;
+
   var affected = new WeakMap();
   var lastTracked = (0, _react.useRef)(null);
   (0, _utils.useIsomorphicLayoutEffect)(function () {
@@ -35,21 +40,18 @@ var useReduxState = function useReduxState() {
     };
   });
   (0, _react.useEffect)(function () {
-    var callback = function callback() {
-      var nextState = store.getState();
+    var callback = function callback(nextState) {
       var changed = (0, _deepProxy.isDeepChanged)(lastTracked.current.state, nextState, lastTracked.current.affected, lastTracked.current.cache, lastTracked.current.assumeChangedIfNotAffected);
 
       if (changed) {
         lastTracked.current.state = nextState;
         forceUpdate();
       }
-    }; // run once in case the state is already changed
-
+    };
 
-    callback();
-    var unsubscribe = store.subscribe(callback);
+    var unsubscribe = subscribe(callback);
     return unsubscribe;
-  }, [store, forceUpdate]);
+  }, [subscribe, forceUpdate]);
   var proxyCache = (0, _react.useRef)(new WeakMap()); // per-hook proxyCache
 
   return (0, _deepProxy.createDeepProxy)(state, affected, proxyCache.current);

dist/useReduxStateRich.js

@@ -9,7 +9,7 @@ var _react = require("react");
 
 var _proxyequal = require("proxyequal");
 
-var _provider = require("./provider");
+var _ReduxProvider = require("./ReduxProvider");
 
 var _utils = require("./utils");
 
@@ -35,10 +35,15 @@ var useTrapped = function useTrapped(state) {
 };
 
 var useReduxStateRich = function useReduxStateRich() {
-  var forceUpdate = (0, _utils.useForceUpdate)(); // redux store&state
+  var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var _opts$customContext = opts.customContext,
+      customContext = _opts$customContext === void 0 ? _ReduxProvider.defaultContext : _opts$customContext;
+  var forceUpdate = (0, _utils.useForceUpdate)(); // redux state
+
+  var _useContext = (0, _react.useContext)(customContext),
+      state = _useContext.state,
+      subscribe = _useContext.subscribe; // trapped
 
-  var store = (0, _react.useContext)(_provider.ReduxStoreContext);
-  var state = store.getState(); // trapped
 
   var trapped = useTrapped(state); // ref
 
@@ -51,21 +56,18 @@ var useReduxStateRich = function useReduxStateRich() {
   }); // subscription
 
   (0, _react.useEffect)(function () {
-    var callback = function callback() {
-      var nextState = store.getState();
+    var callback = function callback(nextState) {
       var changed = !(0, _proxyequal.proxyEqual)(lastTracked.current.state, nextState, lastTracked.current.affected);
 
       if (changed) {
         lastTracked.current.state = nextState;
         forceUpdate();
       }
-    }; // run once in case the state is already changed
-
+    };
 
-    callback();
-    var unsubscribe = store.subscribe(callback);
+    var unsubscribe = subscribe(callback);
     return unsubscribe;
-  }, [store, forceUpdate]);
+  }, [subscribe, forceUpdate]);
   return trapped.state;
 };