Using redux selector in layer rather than viewport.

src/components/layer.tsx

@@ -1,21 +1,25 @@
 import react from 'react';
+import { useSelector } from 'react-redux';
 
 import { ViewportState } from './viewport';
 
 import '../theme/layer.css';
 
 const Layer: react.FC<{
-  viewportState: ViewportState;
   children?: JSX.Element;
-}> = (props: { viewportState: ViewportState; children?: JSX.Element }) => {
+}> = (props: { children?: JSX.Element }) => {
-  const { children: children, ...argProps } = props;
+  const viewportState = useSelector(
-  console.log(`--- Rendering layer, props: ${JSON.stringify(argProps)} ---`);
+    (state: { slippy: ViewportState }) => state.slippy
+  );
+  console.log(
+    `--- Rendering layer, viewportState: ${JSON.stringify(viewportState)} ---`
+  );
 
   return (
     <div
       className='background'
       style={{
-        transform: `translate(${props.viewportState.translation.x}px, ${props.viewportState.translation.y}px) scale(${props.viewportState.scale})`,
+        transform: `translate(${viewportState.translation.x}px, ${viewportState.translation.y}px) scale(${viewportState.scale})`,
       }}
     >
       {props.children}

src/components/viewport.tsx

@@ -24,7 +24,6 @@ export interface Scale {
   };
 }
 
-
 interface ViewportProps {
   children: any;
 }
@@ -37,16 +36,12 @@ export interface ViewportState {
 const Viewport: react.FC<ViewportProps> = (props: ViewportProps) => {
   //console.log(`--- Rendering viewport, props: ${JSON.stringify(props)} ---`);
 
-  const state = useSelector(
-    (globalState: { slippy: ViewportState }) => globalState.slippy
-  );
-
   return (
     <div className='viewport'>
       <MouseHandler>
         <SingleTouchHandler>
           <DoubleTouchHandler>
-            <Layer viewportState={state}>{props.children}</Layer>
+            <Layer>{props.children}</Layer>
           </DoubleTouchHandler>
         </SingleTouchHandler>
       </MouseHandler>