redux-react-hook - npm Package Compare versions

Comparing version 4.0.0 to 4.0.1

CHANGELOG.md

 # Changelog for redux-react-hook
 
+## v4.0.1
+
+Nov 25, 2019
+
+- Published without rebasing with new changes. Doh.
+
 ## v4.0.0
@@ -4,0 +10,0 @@

dist/index.es.js

@@ -33,37 +33,2 @@ import { createContext, useContext, useMemo, useState, useRef, useLayoutEffect, useEffect } from 'react';
 // Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved
-// From https://github.com/reduxjs/react-redux/blob/3e53ff96ed10f71c21346f08823e503df724db35/src/utils/shallowEqual.js
-var hasOwn = Object.prototype.hasOwnProperty;
-function is(x, y) {
-    if (x === y) {
-        return x !== 0 || y !== 0 || 1 / x === 1 / y;
-    }
-    else {
-        return x !== x && y !== y;
-    }
-}
-function shallowEqual(objA, objB) {
-    if (is(objA, objB)) {
-        return true;
-    }
-    if (typeof objA !== 'object' ||
-        objA === null ||
-        typeof objB !== 'object' ||
-        objB === null) {
-        return false;
-    }
-    var keysA = Object.keys(objA);
-    var keysB = Object.keys(objB);
-    if (keysA.length !== keysB.length) {
-        return false;
-    }
-    // tslint:disable-next-line:prefer-for-of
-    for (var i = 0; i < keysA.length; i++) {
-        if (!hasOwn.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
-            return false;
-        }
-    }
-    return true;
-}
-
-// Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved
 // React currently throws a warning when using useLayoutEffect on the server.
@@ -92,2 +57,5 @@ // To get around it, we can conditionally useEffect on the server (no-op) and
 }
+function referenceEqual(a, b) {
+    return a === b;
+}
 /**
@@ -98,3 +66,4 @@ * To use redux-react-hook with stronger type safety, or to use with multiple
  */
-function create() {
+function create(_a) {
+    var _b = (_a === void 0 ? {} : _a).defaultEqualityCheck, defaultEqualityCheck = _b === void 0 ? referenceEqual : _b;
     var StoreContext = createContext(null);
@@ -112,3 +81,4 @@ /**
      */
-    function useMappedState(mapState) {
+    function useMappedState(mapState, equalityCheck) {
+        if (equalityCheck === void 0) { equalityCheck = defaultEqualityCheck; }
         var store = useContext(StoreContext);
@@ -158,3 +128,3 @@ if (!store) {
                 var newDerivedState = memoizedMapStateRef.current(store.getState());
-                if (!shallowEqual(newDerivedState, lastStateRef.current)) {
+                if (!equalityCheck(newDerivedState, lastStateRef.current)) {
                     forceUpdate(increment);
@@ -161,0 +131,0 @@ }

dist/index.js

@@ -37,37 +37,2 @@ 'use strict';
 // Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved
-// From https://github.com/reduxjs/react-redux/blob/3e53ff96ed10f71c21346f08823e503df724db35/src/utils/shallowEqual.js
-var hasOwn = Object.prototype.hasOwnProperty;
-function is(x, y) {
-    if (x === y) {
-        return x !== 0 || y !== 0 || 1 / x === 1 / y;
-    }
-    else {
-        return x !== x && y !== y;
-    }
-}
-function shallowEqual(objA, objB) {
-    if (is(objA, objB)) {
-        return true;
-    }
-    if (typeof objA !== 'object' ||
-        objA === null ||
-        typeof objB !== 'object' ||
-        objB === null) {
-        return false;
-    }
-    var keysA = Object.keys(objA);
-    var keysB = Object.keys(objB);
-    if (keysA.length !== keysB.length) {
-        return false;
-    }
-    // tslint:disable-next-line:prefer-for-of
-    for (var i = 0; i < keysA.length; i++) {
-        if (!hasOwn.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) {
-            return false;
-        }
-    }
-    return true;
-}
-
-// Copyright (c) Facebook, Inc. and its affiliates. All Rights Reserved
 // React currently throws a warning when using useLayoutEffect on the server.
@@ -96,2 +61,5 @@ // To get around it, we can conditionally useEffect on the server (no-op) and
 }
+function referenceEqual(a, b) {
+    return a === b;
+}
 /**
@@ -102,3 +70,4 @@ * To use redux-react-hook with stronger type safety, or to use with multiple
  */
-function create() {
+function create(_a) {
+    var _b = (_a === void 0 ? {} : _a).defaultEqualityCheck, defaultEqualityCheck = _b === void 0 ? referenceEqual : _b;
     var StoreContext = react.createContext(null);
@@ -116,3 +85,4 @@ /**
      */
-    function useMappedState(mapState) {
+    function useMappedState(mapState, equalityCheck) {
+        if (equalityCheck === void 0) { equalityCheck = defaultEqualityCheck; }
         var store = react.useContext(StoreContext);
@@ -162,3 +132,3 @@ if (!store) {
                 var newDerivedState = memoizedMapStateRef.current(store.getState());
-                if (!shallowEqual(newDerivedState, lastStateRef.current)) {
+                if (!equalityCheck(newDerivedState, lastStateRef.current)) {
                     forceUpdate(increment);
@@ -165,0 +135,0 @@ }

package.json

 {
   "name": "redux-react-hook",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "React hook for accessing a Redux store.",
@@ -5,0 +5,0 @@ "author": {

README.md

@@ -16,4 +16,5 @@ # redux-react-hook
   - [`StoreContext`](#storecontext)
-  - [`useMappedState(mapState)`](#usemappedstatemapstate-equalitycheck)
+  - [`useMappedState(mapState, equalityCheck?)`](#usemappedstatemapstate-equalitycheck)
   - [`useDispatch()`](#usedispatch)
+  - [`create(options?)`](#createoptions)
 - [Example](#example)
@@ -57,2 +58,3 @@ - [FAQ](#faq)
 import {useDispatch, useMappedState} from 'redux-react-hook';
+import shallowEqual from 'shallowequal';
 
@@ -70,3 +72,3 @@ export function DeleteButton({index}) {
   // Get data from and subscribe to the store
-  const {canDelete, name} = useMappedState(mapState);
+  const {canDelete, name} = useMappedState(mapState, shallowEqual);
 
@@ -131,6 +133,9 @@ // Create actions
 
-### `useMappedState(mapState)`
+### `useMappedState(mapState, equalityCheck?)`
 
-Runs the given `mapState` function against your store state, just like
-`mapStateToProps`.
+Runs the given `mapState` function against your store state, similar to
+`mapStateToProps`. Unlike `mapStateToProps`, however, the result of your
+`mapState` function is compared for reference equality (`===`) by default. To
+use shallow equal comparison, pass in a comparision function as the second
+parameter.
 
@@ -158,2 +163,26 @@ ```tsx
 
+The second parameter to `useMappedState` is used to determine if a new result from the `mapState` function is the same as the previous result, in which case your component will not be re-rendered. Prior to v4.0.1, this was hard-coded to a shallow equality check. Starting in v4.0.1, `equalityCheck` defaults to reference equality (using `===`). To restore the old behavior, which is particularly useful when you are returning an object, you can use the [`shallowequal`](https://www.npmjs.com/package/shallowequal) module:
+
+```tsx
+import {useMappedState} from 'redux-react-hook';
+import shallowEqual from 'shallowequal';
+
+function TodoItem({index}) {
+  // Note that we pass the index as a dependency parameter -- this causes
+  // useCallback to return the same function every time unless index changes.
+  const mapState = useCallback(
+    state => ({
+      todo: state.todos[index],
+      totalCount: state.todos.length,
+    }),
+    [index],
+  );
+  const {todo, totalCount} = useMappedState(mapState, shallowEqual);
+
+  return <li>{todo}</li>;
+}
+```
+
+To avoid specifying the comparison function on every call to `useMappedState`, you can provide the defaultEqualityCheck option to [`create()`](#create). The `shallowEqual` function from [`fast-equals`](https://www.npmjs.com/package/fast-equals) is another good option, as it handles shallow comparisons of `Map`s and `Set`s as well as objects.
+
 NOTE: Every call to `useMappedState` will subscribe to the store. If the store updates, though, your component will only re-render once. So, calling `useMappedState` more than once (for example encapsulated inside a custom hook) should not have a large performance impact. If your measurements show a performance impact, you can switch to returning an object instead.
@@ -178,3 +207,3 @@
 
-### `create()`
+### `create(options?)`
 
@@ -184,3 +213,4 @@ Creates an instance of Redux React Hooks with a new `StoreContext`. The above functions are just exports of the default instance. You may want to create your own instance if:
 1. You want better type safety without annotating every callsite. Creating your own instance ensures that the types are the same for all consumers. See the example for more info.
-2. You have multiple Redux stores (this is not common)
+2. You want to provide a default implementation of `equalityCheck` for all calls to `mapState`
+3. You have multiple Redux stores (this is not common)
 
@@ -208,2 +238,20 @@ ```tsx
 
+`create` takes an optional `options` object with the following options:
+
+- `defaultEqualityCheck` - the default implementation of `equalityCheck` to use in `useMappedState`, defaults to refence equality (`===`)
+
+To restore the pre v4.0.1 comparison behavior, for example:
+
+```tsx
+import {create} from 'redux-react-hook';
+import shallowEqual from 'shallow-equal';
+
+// Example in TypeScript where you have defined IState and Action
+export const {StoreContext, useDispatch, useMappedState} = create<
+  IState,
+  Action,
+  Store<IState, Action>
+>({defaultEqualityCheck: shallowEqual});
+```
+
 ## Example
@@ -210,0 +258,0 @@

No alert changes

Improved metrics

Number of lines in readme file

322

increased by17.52%

Worsened metrics

Total package byte prevSize

72763

decreased by-2.8%

Lines of code

353

decreased by-14.11%

No dependency changes