Moving the underlying map out of the slippy component and handling window resize events.

src/store/index.ts

@@ -1,9 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
 
 import slippyReducer from './slippy';
+import mapReducer from './map';
 
 const store = configureStore({
-  reducer: { slippy: slippyReducer},
+  reducer: { slippy: slippyReducer, map: mapReducer },
 });
 
 export default store;

src/store/map.ts

@@ -0,0 +1,30 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+export interface MapState {
+  viewport: {
+    width: number;
+    height: number;
+  };
+}
+
+const initialMapState: MapState = {
+  viewport: {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  },
+};
+
+const mapSlice = createSlice({
+  name: 'map',
+  initialState: initialMapState,
+  reducers: {
+    resize: (state) => {
+        state.viewport.height = window.innerHeight;
+        state.viewport.width = window.innerWidth;
+    },
+  },
+});
+
+export const mapActions = mapSlice.actions;
+
+export default mapSlice.reducer;