redux-astroglide 0.1.11 → 0.1.13

package/README.md

@@ -1,8 +1,8 @@
 # Redux-Astroglide
 
-#### Taking the pain out of state management by stuffing a huge package into a tiny API
+#### Redux doesn't need to be such a pain the butt!
 
-Astroglide is a set of configuration and automation tools built on top of Redux Toolkit in order to provide the most succinct API with the least boilerplate possible. It's the easiest way to get up and running with redux state, and has the lowest mental overhead of any state management tool for React.
+Redux-Astroglide is a set of configuration and automation tools built on top of Redux Toolkit in order to provide the most succinct API with the least boilerplate possible. It's the easiest way to get up and running with redux state, and has the lowest mental overhead of any state management tool for React.
 
 We stay DRY so you don't have to.
 
@@ -13,10 +13,14 @@ We stay DRY so you don't have to.
 ```bash
 # NPM
 npm install @reduxjs/toolkit redux-astroglide
+```
 
+```bash
 # Yarn
 yarn add @reduxjs/toolkit redux-astroglide
+```
 
+```bash
 # PNPM
 pnpm add @reduxjs/toolkit redux-astroglide
 
@@ -54,10 +58,11 @@ const slice = createSlice(
     // initial state
     username: "",
     password: "",
+    count: 0,
   }
 );
 
-export const { setPassword, setUsername } = slice.actions;
+export const { setUsername, setPassword } = slice.actions;
 export const { selectUsername, selectPassword } = slice.selectors;
 export const { useUsername, usePassword } = slice.hooks;
 ```
@@ -72,6 +77,7 @@ const slice = createSlice({
   initialState: {
     username: "",
     password: "",
+    count: 0,
   },
   reducers: {
     // custom reducers are the most likely reason to use this syntax
@@ -109,12 +115,25 @@ export const UsernameField = (props) => {
       name="username"
       type="text"
       value={username}
-      onChange={(e) => setUsername(e.target.value)} // this triggers a redux action
+      onChange={
+        (e) => setUsername(e.target.value) // dispatch a redux action named "LoginForm/setUsername"
+      }
     />
   );
 };
 ```
 
+You can pass a function to the hook to assign a custom value setter for that instance of the hook:
+
+```jsx
+// component.js
+function Component() {
+  const [count, increment] = useCount((currentCount) => currentCount + 1);
+
+  // ...
+}
+```
+
  
 
 The setter actions can be passed a function to receive a copy of the latest state value, just like with React's setState:
@@ -209,7 +228,7 @@ function* loginSaga(action) {
 
  
 
-Astroglide also provides some of its internal helper functions you may find useful:
+Astroglide also provides some of its internal helper functions:
 
 ```jsx
 const configure = "redux-astroglide";
@@ -217,6 +236,7 @@ const configure = "redux-astroglide";
 export const {
   store,
   createSlice,
+
   injectReducer, // injectReducer(key: string, state => state: reducer fn, optionally async)
   injectSlice, // injectSlice(slice: result from createSlice())
   injectMiddleware, // injectMiddleware(middleware: redux middleware)
@@ -227,7 +247,7 @@ export const {
 
 ## Plugins
 
-Astroglide ships with a handful of plugins you can use for things like typechecking and data persistence:
+Astroglide comes with plugins you can use for typechecking, data persistence and custom value and state setters:
 
 ```jsx
 // Login/slice.js
@@ -238,10 +258,14 @@ const slice = createSlice("Login", {
 
 // Nav/slice.js
 const slice = createSlice("Nav", {
-  isOpen: persist("", {
-    storageType: localStorage, // default localStorage, must provide { getItem(key):any, setItem(key, value):void } API (async not allowed)
+  token: persist("", {
+    storageType: localStorage, // default localStorage, or API passed to setup fn, must provide { getItem(key):any, setItem(key, value):void } API (async not allowed)
   }),
   clickCount: set((value) => value + 1),
+  instanceCount: set((value, { draft }) => {
+    draft.clickCount = 0;
+    return value + 1;
+  }),
 });
 ```
 
@@ -255,13 +279,18 @@ import configure, { addPlugins } from "redux-astroglide";
 import setPlugin from "redux-astroglide/plugins/set";
 import typePlugin from "redux-astroglide/plugins/type";
 import persistPlugin from "redux-astroglide/plugins/persist";
-// these can also be imported collectively like:
+// these can also be imported like:
 // import { set, type, persist } = "redux-astroglide/plugins";
 
 export const [set, type, persist] = addPlugins(
   setPlugin(),
   typePlugin({ shouldPreventUpdate: false }),
-  persistPlugin()
+  persistPlugin({
+    storageType: { // defaults to localStorage (async storage not allowed)
+      getItem(key: string),
+      setItem(key: string, value: string)}
+    }
+  )
 );
 
 export const { store, createSlice } = configure();
@@ -278,7 +307,8 @@ import {
 const currentValue = getPersistedValue(
   "isOpen",
   "Nav"
-  // storageType: localStorage | sessionStorage | { getItem, setItem }
+  // storageType: localStorage | sessionStorage |
+  // { getItem(key: string), setItem(key: string, value:string) }
 );
 
 storePersistedValue(

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { bindActionCreators, combineReducers, createDraftSafeSelector, configureStore, createSlice } from '@reduxjs/toolkit';
-import { injectMiddleware, injectableMiddleware } from 'redux-injectable-middleware';
-import { useDispatch, useSelector } from 'react-redux';
+import { useDispatch, useSelector, shallowEqual } from 'react-redux';
+import { injectableMiddleware, injectMiddleware } from 'redux-injectable-middleware';
 import { useMemo } from 'react';
 
 function ownKeys(object, enumerableOnly) {
@@ -3591,11 +3591,102 @@ var makeSetterReducersFromInitialState = function makeSetterReducersFromInitialS
 
 /* eslint-enable react/forbid-foreign-prop-types */
 
+var plugin = function plugin(_ref) {
+  var constructorFn = _ref.constructor,
+    setup = _ref.setup,
+    getInitialValue = _ref.getInitialValue,
+    update = _ref.update,
+    _ref$config = _ref.config,
+    config = _ref$config === void 0 ? {} : _ref$config;
+  return /*#__PURE__*/function () {
+    function _class(value) {
+      _classCallCheck(this, _class);
+      this.value = value;
+      this.setup = setup || this.setup;
+      this.getInitialValue = getInitialValue || this.getInitialValue;
+      this.update = update || this.update;
+      this.config = config;
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+      constructorFn === null || constructorFn === void 0 ? void 0 : constructorFn.call.apply(constructorFn, [this, value].concat(args));
+    }
+
+    // either the initial state value or the next plugin
+    _createClass(_class, [{
+      key: "getValue",
+      value: function getValue() {
+        return this.value;
+      }
+    }, {
+      key: "setValue",
+      value: function setValue(value) {
+        this.value = value;
+      }
+    }, {
+      key: "setConfig",
+      value: function setConfig(config) {
+        this.config = _objectSpread2(_objectSpread2({}, this.config), config);
+      }
+    }, {
+      key: "setup",
+      value: function setup(item, _ref2) {
+        _objectDestructuringEmpty(_ref2);
+        return {
+          plugin: item
+        };
+      }
+    }, {
+      key: "getInitialValue",
+      value: function getInitialValue(value, _ref3) {
+        _objectDestructuringEmpty(_ref3);
+        return value;
+      }
+    }, {
+      key: "update",
+      value: function update(value, _ref4) {
+        _objectDestructuringEmpty(_ref4);
+        return value;
+      }
+    }]);
+    return _class;
+  }();
+};
+var addPlugin = function addPlugin(config) {
+  var Class = plugin(config);
+  plugins.push(Class);
+  return function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    return _construct(Class, args);
+  };
+};
+var addPlugins = function addPlugins() {
+  for (var _len3 = arguments.length, configs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    configs[_key3] = arguments[_key3];
+  }
+  return configs.map(addPlugin);
+};
+var plugins = [];
+
+var makeSelectorHook = function makeSelectorHook(selector) {
+  return function () {
+    return useSelector(selector, shallowEqual);
+  };
+};
 var createSelectorUpdateHook = function createSelectorUpdateHook(selector, action) {
   return function () {
     return [useSelector(selector), useAction(action, undefined)];
   };
 };
+var createSelectorHook = function createSelectorHook() {
+  // creates a redux selector and a react hook that produce identical results
+  var selector = createDraftSafeSelector.apply(void 0, arguments);
+  var hook = makeSelectorHook(selector);
+  hook.select = selector;
+  return hook;
+};
 var configure$1 = function configure(store) {
   var makeDomainSelector = function makeDomainSelector(name, initialState) {
     return function (state) {
@@ -3651,7 +3742,12 @@ var configure$1 = function configure(store) {
       throw Error("Action ".concat(slice.name, "/").concat(actionName, " not defined"));
     }
     var useState = function useState() {
-      return [useSelector(selector), useAction(updateAction, undefined)];
+      var setterCb = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function (value) {
+        return value;
+      };
+      return [useSelector(selector), useAction(function (value) {
+        return updateAction(setterCb(value));
+      }, undefined)];
     };
     useState.select = selector;
     useState.update = updateAction;
@@ -3679,108 +3775,24 @@ var configure$1 = function configure(store) {
   };
 };
 
-var plugin = function plugin(_ref) {
-  var constructorFn = _ref.constructor,
-    setup = _ref.setup,
-    getInitialValue = _ref.getInitialValue,
-    update = _ref.update,
-    _ref$config = _ref.config,
-    config = _ref$config === void 0 ? {} : _ref$config;
-  return /*#__PURE__*/function () {
-    function _class(value) {
-      _classCallCheck(this, _class);
-      this.value = value;
-      this.setup = setup || this.setup;
-      this.getInitialValue = getInitialValue || this.getInitialValue;
-      this.update = update || this.update;
-      this.config = config;
-      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        args[_key - 1] = arguments[_key];
-      }
-      constructorFn === null || constructorFn === void 0 ? void 0 : constructorFn.call.apply(constructorFn, [this, value].concat(args));
-    }
-
-    // either the initial state value or the next plugin
-    _createClass(_class, [{
-      key: "getValue",
-      value: function getValue() {
-        return this.value;
-      }
-    }, {
-      key: "setValue",
-      value: function setValue(value) {
-        this.value = value;
-      }
-    }, {
-      key: "setConfig",
-      value: function setConfig(config) {
-        this.config = _objectSpread2(_objectSpread2({}, this.config), config);
-      }
-    }, {
-      key: "setup",
-      value: function setup(item, _ref2) {
-        _objectDestructuringEmpty(_ref2);
-        return {
-          plugin: item
-        };
-      }
-    }, {
-      key: "getInitialValue",
-      value: function getInitialValue(value, _ref3) {
-        _objectDestructuringEmpty(_ref3);
-        return value;
-      }
-    }, {
-      key: "update",
-      value: function update(value, _ref4) {
-        _objectDestructuringEmpty(_ref4);
-        return value;
-      }
-    }]);
-    return _class;
-  }();
-};
-var addPlugin = function addPlugin(config) {
-  var Class = plugin(config);
-  plugins.push(Class);
-  return function () {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    return _construct(Class, args);
-  };
-};
-var addPlugins = function addPlugins() {
-  for (var _len3 = arguments.length, configs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    configs[_key3] = arguments[_key3];
-  }
-  return configs.map(addPlugin);
-};
-var plugins = [];
-
-var _excluded = ["middleware", "reducer", "devTools", "preloadedState", "enhancers"],
+var _excluded = ["middleware", "devTools", "preloadedState", "enhancers"],
   _excluded2 = ["selectDomain"];
 var configure = function configure(_ref) {
   var _middleware = _ref.middleware,
-    reducer = _ref.reducer,
     devTools = _ref.devTools,
     preloadedState = _ref.preloadedState,
     enhancers = _ref.enhancers,
     staticReducers = _objectWithoutProperties(_ref, _excluded);
-  var store = configureStore(_objectSpread2(_objectSpread2({}, Object.keys(staticReducers).length ? staticReducers : {
-    reducer: reducer || function () {
-      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      return state;
-    }
-  }), {}, {
-    // @ts-ignore
+  var store = configureStore({
+    // @ts-ignore-next-line
+    reducer: combineReducers(staticReducers),
     middleware: function middleware(getDefaultMiddleware) {
       return [].concat(_toConsumableArray(typeof _middleware === "function" ? _middleware(getDefaultMiddleware) : _middleware || []), [injectableMiddleware]);
     },
     devTools: devTools,
     preloadedState: preloadedState,
     enhancers: enhancers
-  }));
+  });
   var _configureSelectors = configure$1(store),
     makePropertySelectorsFromSlice = _configureSelectors.makePropertySelectorsFromSlice;
   var injectSlice$1 = function injectSlice$1(slice) {
@@ -3889,7 +3901,7 @@ var configure = function configure(_ref) {
 
     /* eslint-disable react-hooks/rules-of-hooks */
     hooks[domainHookKey] = function () {
-      return [useAction(slice.actions[sliceSetterKey], undefined).apply(void 0, _toConsumableArray(getParams())),
+      return [useSelector(selectDomain), useAction(slice.actions[sliceSetterKey], undefined).apply(void 0, _toConsumableArray(getParams())),
       // prop updater
       useAction(slice.actions.__override__slice__caution, undefined) // state overwriter
       ];
@@ -3930,4 +3942,4 @@ var configure = function configure(_ref) {
   };
 };
 
-export { addPlugin, addPlugins, configure, createSelectorUpdateHook, configure as default, plugins };
+export { addPlugin, addPlugins, configure, createSelectorHook, createSelectorUpdateHook, configure as default, plugins };

package/dist/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var toolkit = require('@reduxjs/toolkit');
-var reduxInjectableMiddleware = require('redux-injectable-middleware');
 var reactRedux = require('react-redux');
+var reduxInjectableMiddleware = require('redux-injectable-middleware');
 var react = require('react');
 
 function ownKeys(object, enumerableOnly) {
@@ -3595,11 +3595,102 @@ var makeSetterReducersFromInitialState = function makeSetterReducersFromInitialS
 
 /* eslint-enable react/forbid-foreign-prop-types */
 
+var plugin = function plugin(_ref) {
+  var constructorFn = _ref.constructor,
+    setup = _ref.setup,
+    getInitialValue = _ref.getInitialValue,
+    update = _ref.update,
+    _ref$config = _ref.config,
+    config = _ref$config === void 0 ? {} : _ref$config;
+  return /*#__PURE__*/function () {
+    function _class(value) {
+      _classCallCheck(this, _class);
+      this.value = value;
+      this.setup = setup || this.setup;
+      this.getInitialValue = getInitialValue || this.getInitialValue;
+      this.update = update || this.update;
+      this.config = config;
+      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        args[_key - 1] = arguments[_key];
+      }
+      constructorFn === null || constructorFn === void 0 ? void 0 : constructorFn.call.apply(constructorFn, [this, value].concat(args));
+    }
+
+    // either the initial state value or the next plugin
+    _createClass(_class, [{
+      key: "getValue",
+      value: function getValue() {
+        return this.value;
+      }
+    }, {
+      key: "setValue",
+      value: function setValue(value) {
+        this.value = value;
+      }
+    }, {
+      key: "setConfig",
+      value: function setConfig(config) {
+        this.config = _objectSpread2(_objectSpread2({}, this.config), config);
+      }
+    }, {
+      key: "setup",
+      value: function setup(item, _ref2) {
+        _objectDestructuringEmpty(_ref2);
+        return {
+          plugin: item
+        };
+      }
+    }, {
+      key: "getInitialValue",
+      value: function getInitialValue(value, _ref3) {
+        _objectDestructuringEmpty(_ref3);
+        return value;
+      }
+    }, {
+      key: "update",
+      value: function update(value, _ref4) {
+        _objectDestructuringEmpty(_ref4);
+        return value;
+      }
+    }]);
+    return _class;
+  }();
+};
+var addPlugin = function addPlugin(config) {
+  var Class = plugin(config);
+  plugins.push(Class);
+  return function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    return _construct(Class, args);
+  };
+};
+var addPlugins = function addPlugins() {
+  for (var _len3 = arguments.length, configs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+    configs[_key3] = arguments[_key3];
+  }
+  return configs.map(addPlugin);
+};
+var plugins = [];
+
+var makeSelectorHook = function makeSelectorHook(selector) {
+  return function () {
+    return reactRedux.useSelector(selector, reactRedux.shallowEqual);
+  };
+};
 var createSelectorUpdateHook = function createSelectorUpdateHook(selector, action) {
   return function () {
     return [reactRedux.useSelector(selector), useAction(action, undefined)];
   };
 };
+var createSelectorHook = function createSelectorHook() {
+  // creates a redux selector and a react hook that produce identical results
+  var selector = toolkit.createDraftSafeSelector.apply(void 0, arguments);
+  var hook = makeSelectorHook(selector);
+  hook.select = selector;
+  return hook;
+};
 var configure$1 = function configure(store) {
   var makeDomainSelector = function makeDomainSelector(name, initialState) {
     return function (state) {
@@ -3655,7 +3746,12 @@ var configure$1 = function configure(store) {
       throw Error("Action ".concat(slice.name, "/").concat(actionName, " not defined"));
     }
     var useState = function useState() {
-      return [reactRedux.useSelector(selector), useAction(updateAction, undefined)];
+      var setterCb = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : function (value) {
+        return value;
+      };
+      return [reactRedux.useSelector(selector), useAction(function (value) {
+        return updateAction(setterCb(value));
+      }, undefined)];
     };
     useState.select = selector;
     useState.update = updateAction;
@@ -3683,108 +3779,24 @@ var configure$1 = function configure(store) {
   };
 };
 
-var plugin = function plugin(_ref) {
-  var constructorFn = _ref.constructor,
-    setup = _ref.setup,
-    getInitialValue = _ref.getInitialValue,
-    update = _ref.update,
-    _ref$config = _ref.config,
-    config = _ref$config === void 0 ? {} : _ref$config;
-  return /*#__PURE__*/function () {
-    function _class(value) {
-      _classCallCheck(this, _class);
-      this.value = value;
-      this.setup = setup || this.setup;
-      this.getInitialValue = getInitialValue || this.getInitialValue;
-      this.update = update || this.update;
-      this.config = config;
-      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        args[_key - 1] = arguments[_key];
-      }
-      constructorFn === null || constructorFn === void 0 ? void 0 : constructorFn.call.apply(constructorFn, [this, value].concat(args));
-    }
-
-    // either the initial state value or the next plugin
-    _createClass(_class, [{
-      key: "getValue",
-      value: function getValue() {
-        return this.value;
-      }
-    }, {
-      key: "setValue",
-      value: function setValue(value) {
-        this.value = value;
-      }
-    }, {
-      key: "setConfig",
-      value: function setConfig(config) {
-        this.config = _objectSpread2(_objectSpread2({}, this.config), config);
-      }
-    }, {
-      key: "setup",
-      value: function setup(item, _ref2) {
-        _objectDestructuringEmpty(_ref2);
-        return {
-          plugin: item
-        };
-      }
-    }, {
-      key: "getInitialValue",
-      value: function getInitialValue(value, _ref3) {
-        _objectDestructuringEmpty(_ref3);
-        return value;
-      }
-    }, {
-      key: "update",
-      value: function update(value, _ref4) {
-        _objectDestructuringEmpty(_ref4);
-        return value;
-      }
-    }]);
-    return _class;
-  }();
-};
-var addPlugin = function addPlugin(config) {
-  var Class = plugin(config);
-  plugins.push(Class);
-  return function () {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    return _construct(Class, args);
-  };
-};
-var addPlugins = function addPlugins() {
-  for (var _len3 = arguments.length, configs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-    configs[_key3] = arguments[_key3];
-  }
-  return configs.map(addPlugin);
-};
-var plugins = [];
-
-var _excluded = ["middleware", "reducer", "devTools", "preloadedState", "enhancers"],
+var _excluded = ["middleware", "devTools", "preloadedState", "enhancers"],
   _excluded2 = ["selectDomain"];
 var configure = function configure(_ref) {
   var _middleware = _ref.middleware,
-    reducer = _ref.reducer,
     devTools = _ref.devTools,
     preloadedState = _ref.preloadedState,
     enhancers = _ref.enhancers,
     staticReducers = _objectWithoutProperties(_ref, _excluded);
-  var store = toolkit.configureStore(_objectSpread2(_objectSpread2({}, Object.keys(staticReducers).length ? staticReducers : {
-    reducer: reducer || function () {
-      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      return state;
-    }
-  }), {}, {
-    // @ts-ignore
+  var store = toolkit.configureStore({
+    // @ts-ignore-next-line
+    reducer: toolkit.combineReducers(staticReducers),
     middleware: function middleware(getDefaultMiddleware) {
       return [].concat(_toConsumableArray(typeof _middleware === "function" ? _middleware(getDefaultMiddleware) : _middleware || []), [reduxInjectableMiddleware.injectableMiddleware]);
     },
     devTools: devTools,
     preloadedState: preloadedState,
     enhancers: enhancers
-  }));
+  });
   var _configureSelectors = configure$1(store),
     makePropertySelectorsFromSlice = _configureSelectors.makePropertySelectorsFromSlice;
   var injectSlice$1 = function injectSlice$1(slice) {
@@ -3893,7 +3905,7 @@ var configure = function configure(_ref) {
 
     /* eslint-disable react-hooks/rules-of-hooks */
     hooks[domainHookKey] = function () {
-      return [useAction(slice.actions[sliceSetterKey], undefined).apply(void 0, _toConsumableArray(getParams())),
+      return [reactRedux.useSelector(selectDomain), useAction(slice.actions[sliceSetterKey], undefined).apply(void 0, _toConsumableArray(getParams())),
       // prop updater
       useAction(slice.actions.__override__slice__caution, undefined) // state overwriter
       ];
@@ -3937,6 +3949,7 @@ var configure = function configure(_ref) {
 exports.addPlugin = addPlugin;
 exports.addPlugins = addPlugins;
 exports.configure = configure;
+exports.createSelectorHook = createSelectorHook;
 exports.createSelectorUpdateHook = createSelectorUpdateHook;
 exports["default"] = configure;
 exports.plugins = plugins;