add spec, fix impl

Author: dai-shi

__tests__/03_stale_props.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import { createStore } from 'redux';
+
+import { render, cleanup, act } from '@testing-library/react';
+
+import { Provider, useSelector } from '../src/index';
+
+describe('stale props spec', () => {
+  afterEach(cleanup);
+
+  it('ignores transient errors in selector (e.g. due to stale props)', () => {
+    const Parent = () => {
+      const count = useSelector((state) => state.count);
+      return <Child parentCount={count} />;
+    };
+
+    const Child = ({ parentCount }) => {
+      const selector = (state) => {
+        if (state.count !== parentCount) {
+          throw new Error();
+        }
+        return state.count + parentCount;
+      };
+      const result = useSelector(selector);
+      return <div>{result}</div>;
+    };
+
+    const store = createStore((state = { count: -1 }) => ({ count: state.count + 1 }));
+
+    const App = () => (
+      <Provider store={store}>
+        <Parent />
+      </Provider>
+    );
+
+    render(<App />);
+    act(() => {
+      expect(() => store.dispatch({ type: '' })).not.toThrowError();
+    });
+  });
+
+  it('ensures consistency of state and props in selector', () => {
+    let selectorSawInconsistencies = false;
+
+    const Parent = () => {
+      const count = useSelector((state) => state.count);
+      return <Child parentCount={count} />;
+    };
+
+    const Child = ({ parentCount }) => {
+      const selector = (state) => {
+        selectorSawInconsistencies = selectorSawInconsistencies || (state.count !== parentCount);
+        return state.count + parentCount;
+      };
+      const result = useSelector(selector);
+      return <div>{result}</div>;
+    };
+
+    const store = createStore((state = { count: -1 }) => ({ count: state.count + 1 }));
+
+    const App = () => (
+      <Provider store={store}>
+        <Parent />
+      </Provider>
+    );
+
+    render(<App />);
+    act(() => {
+      store.dispatch({ type: '' });
+    });
+    expect(selectorSawInconsistencies).toBe(false);
+  });
+});

src/useSelector.js

@@ -11,21 +11,14 @@ export const useSelector = (selector, eqlFn, opts) => {
     customContext = defaultContext,
   } = opts || (!isFunction(eqlFn) && eqlFn) || {};
   const { state, subscribe } = useContext(customContext);
-  const [selected, updateSelected] = useReducer((prevSelected, nextState) => {
-    const nextSelected = selector(nextState);
+  const [selected, updateSelected] = useReducer((prevSelected) => {
+    const nextSelected = selector(state);
     if (equalityFn(prevSelected, nextSelected)) return prevSelected;
     return nextSelected;
   }, state, selector);
-  let selectedToReturn = selected;
-  const currSelected = selector(state);
-  if (!equalityFn(selected, currSelected)) {
-    // schedule another update, because state from context has been changed
-    updateSelected(state);
-    selectedToReturn = currSelected;
-  }
   useEffect(() => {
     const unsubscribe = subscribe(updateSelected);
     return unsubscribe;
   }, [subscribe]);
-  return selectedToReturn;
+  return selected;
 };