v0.9.0; useReduxStateSimple

CHANGELOG.md

@@ -2,12 +2,16 @@
 
 ## [Unreleased]
 
+## [0.9.0] - 2019-01-10
+### Added
+- useReduxStateSimple for shallow object comparison
+
 ## [0.8.0] - 2018-12-24
 ### Changed
 - No spread guards in proxyequal for better compatibility
 
 ## [0.7.0] - 2018-12-19
-### Add
+### Added
 - Better warning message for no ReduxProvider
 ### Changed
 - Refactor to support dynamic updating

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018 Daishi Kato
+Copyright (c) 2018-2019 Daishi Kato
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

dist/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useReduxState = exports.useReduxDispatch = exports.ReduxProvider = void 0;
+exports.useReduxStateSimple = exports.useReduxState = exports.useReduxDispatch = exports.ReduxProvider = void 0;
 
 var _react = require("react");
 
@@ -82,4 +82,40 @@ var useReduxState = function useReduxState() {
   return trapped.current.state;
 };
 
-exports.useReduxState = useReduxState;
+exports.useReduxState = useReduxState;
+
+var useReduxStateSimple = function useReduxStateSimple() {
+  var forceUpdate = useForceUpdate();
+  var store = (0, _react.useContext)(ReduxStoreContext);
+  var state = (0, _react.useRef)();
+  state.current = store.getState();
+  var used = (0, _react.useMemo)(function () {
+    return {};
+  }, [store]);
+  var handler = (0, _react.useMemo)(function () {
+    return {
+      get: function get(target, name) {
+        used[name] = true;
+        return target[name];
+      }
+    };
+  }, [store]);
+  (0, _react.useEffect)(function () {
+    var callback = function callback() {
+      var nextState = store.getState();
+      var changed = Object.keys(used).find(function (key) {
+        return state.current[key] !== nextState[key];
+      });
+
+      if (changed) {
+        forceUpdate();
+      }
+    };
+
+    var unsubscribe = store.subscribe(callback);
+    return unsubscribe;
+  }, [store]);
+  return new Proxy(state.current, handler);
+};
+
+exports.useReduxStateSimple = useReduxStateSimple;

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-hooks-easy-redux",
   "description": "Easy React bindings for Redux with Hooks API",
-  "version": "0.8.2",
+  "version": "0.9.0",
   "author": "Daishi Kato",
   "repository": {
     "type": "git",

src/index.d.ts

@@ -14,3 +14,5 @@ export const ReduxProvider: ReduxProviderType;
 export const useReduxDispatch: <A extends Action>() => Dispatch<A>;
 
 export const useReduxState: <S>() => S;
+
+export const useReduxStateSimple: <S>() => S;

src/index.js

@@ -3,6 +3,7 @@ import {
   createElement,
   useContext,
   useEffect,
+  useMemo,
   useReducer,
   useRef,
 } from 'react';
@@ -68,3 +69,29 @@ export const useReduxState = () => {
   }, [store]);
   return trapped.current.state;
 };
+
+export const useReduxStateSimple = () => {
+  const forceUpdate = useForceUpdate();
+  const store = useContext(ReduxStoreContext);
+  const state = useRef();
+  state.current = store.getState();
+  const used = useMemo(() => ({}), [store]);
+  const handler = useMemo(() => ({
+    get: (target, name) => {
+      used[name] = true;
+      return target[name];
+    },
+  }), [store]);
+  useEffect(() => {
+    const callback = () => {
+      const nextState = store.getState();
+      const changed = Object.keys(used).find(key => state.current[key] !== nextState[key]);
+      if (changed) {
+        forceUpdate();
+      }
+    };
+    const unsubscribe = store.subscribe(callback);
+    return unsubscribe;
+  }, [store]);
+  return new Proxy(state.current, handler);
+};