[@xstate/store] Add shallowEqual (#5085)

* Add the shallowEqual comparator

* Changeset

* Remove test

* Update packages/xstate-store/test/react.test.tsx

Co-authored-by: Mateusz Burzyński <[email protected]>

---------

Co-authored-by: Mateusz Burzyński <[email protected]>

.changeset/friendly-jokes-whisper.md

@@ -0,0 +1,24 @@
+---
+'@xstate/store': minor
+---
+
+The `shallowEqual` comparator has been added for selector comparison:
+
+```tsx
+import { shallowEqual } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
+
+import { store } from './store';
+
+function MyComponent() {
+  const state = useSelector(
+    store,
+    (s) => {
+      return s.items.filter(/* ... */);
+    },
+    shallowEqual
+  );
+
+  // ...
+}
+```

packages/xstate-store/src/index.ts

@@ -1,3 +1,4 @@
+export { shallowEqual } from './shallowEqual';
 export { fromStore } from './fromStore';
 export { createStore, createStoreWithProducer } from './store';
 export * from './types';

packages/xstate-store/src/shallowEqual.ts

@@ -0,0 +1,37 @@
+// From https://github.com/reduxjs/react-redux/blob/720f0ba79236cdc3e1115f4ef9a7760a21784b48/src/utils/shallowEqual.ts
+function is(x: unknown, y: unknown) {
+  if (x === y) {
+    return x !== 0 || y !== 0 || 1 / x === 1 / y;
+  } else {
+    return x !== x && y !== y;
+  }
+}
+
+export function shallowEqual(objA: any, objB: any) {
+  if (is(objA, objB)) return true;
+
+  if (
+    typeof objA !== 'object' ||
+    objA === null ||
+    typeof objB !== 'object' ||
+    objB === null
+  ) {
+    return false;
+  }
+
+  const keysA = Object.keys(objA);
+  const keysB = Object.keys(objB);
+
+  if (keysA.length !== keysB.length) return false;
+
+  for (let i = 0; i < keysA.length; i++) {
+    if (
+      !Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||
+      !is(objA[keysA[i]], objB[keysA[i]])
+    ) {
+      return false;
+    }
+  }
+
+  return true;
+}