Refactoring (in progress) to put most of the logic in Redux reducers.

src/components/map/tiled-map.tsx

@@ -0,0 +1,37 @@
+import react from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { MapState } from '../../store/map';
+import Tile from './tile';
+
+import '../../theme/map.css';
+import _ from 'lodash';
+
+export const tileSize = 256;
+
+const TiledMap: react.FC<{}> = (props: {}) => {
+  const dispatch = useDispatch();
+
+  const tilesState = useSelector((state: { map: MapState }) => state.map.tiles);
+  console.log(`tilesState: ${JSON.stringify(tilesState)}`);
+
+  return (
+    <div className='tiles'>
+      {_.range(tilesState.nb.y).map((iy) => (
+        <div key={'y' + iy} className='tilesRow'>
+          {_.range(tilesState.nb.y).map((ix) => (
+            <Tile
+              key={'x' + ix + 'y' + iy}
+              iy={iy}
+              ix={ix}
+              x={tilesState.first.x + ix}
+              y={tilesState.first.y + iy}
+              zoom={tilesState.zoom}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default TiledMap;