Use useSelector the right way

test/typescript/sample-react-redux-usage.tsx

@@ -2,8 +2,7 @@
 // This is compiled using `tsc` in our `test-ts-usage` script
 import React from 'react';
 import ReactDOM from 'react-dom';
-// useSelector
-import { Provider, useSelector, DefaultRootState } from 'react-redux';
+import { Provider, useSelector } from 'react-redux';
 import { createStore } from 'redux';
 
 import equal from '../../index.js';
@@ -23,11 +22,11 @@ const testArr: IItem[] = [
   { text: 'air', id: '8' },
 ];
 
-interface IContainerState extends DefaultRootState {
-  overlap: IItem[];
-}
+type IContainerState = {
+  overlap: () => IItem[];
+};
 
-const overlap = (state = [], action) => {
+const overlap = (state: IItem[] = [], action) => {
   switch (action.type) {
     case 'ADD_ITEM':
       return state.concat([action.text]);
@@ -36,19 +35,21 @@ const overlap = (state = [], action) => {
   }
 };
 
-const store = createStore(overlap, ['mountain']);
+const store = createStore(overlap, [{ text: 'mountain', id: '11' }]);
 
 class TestContainer extends React.Component<{}, IContainerState> {
   render() {
-    useSelector(this.state, equal);
-
+    // useSelector compares arg1 to the redux state store,
+    // using arg2's equality fn
+    // return value will be the same as the equality fn
     return (
       <div>
         Testing react-redux
         <div>
-          {testArr.map((item) => (
-            <p key={item.id}>{item.text}</p>
-          ))}
+          {testArr.map((item) => {
+            useSelector(item, equal);
+            return <p key={item.id}>{item.text}</p>;
+          })}
         </div>
       </div>
     );