Add new root reducer: UI. Include display settings (mobile or desktop)

recipes/src/store/configureStore.ts

@@ -4,12 +4,15 @@ import { composeWithDevTools } from 'redux-devtools-extension';
 import { recipesReducer } from 'containers/Recipes/List/reducers';
 import shoppingCartReducer from 'containers/ShoppingCart/reducers';
 import plannerReducer from 'containers/Planner/reducers';
+import uiReducer from './uiReducer'
 
 const composeEnhancers = composeWithDevTools({});
+
 const rootReducer = combineReducers({
   recipes: recipesReducer,
   shoppingCart: shoppingCartReducer,
-  planner: plannerReducer
+  planner: plannerReducer,
+  ui: uiReducer
 })
 
 const configureStore = () => {

recipes/src/store/uiReducer.ts

@@ -0,0 +1,47 @@
+import { Reducer, Action } from "redux"
+
+export enum Display {
+  Desktop,
+  Mobile
+}
+
+type UiState = {
+  display: Display,
+}
+
+const initialState: UiState = {
+  display: window.innerWidth < 840 ? Display.Mobile : Display.Desktop
+}
+
+const CHANGE_DISPLAY = 'CHANGE_DISPLAY';
+
+interface ChangeDisplayAction extends Action<'CHANGE_DISPLAY'> {
+  display: Display
+}
+const changeDisplay = (display: Display): ChangeDisplayAction => ({
+  type: CHANGE_DISPLAY,
+  display,
+});
+
+export type UiActionsType = ChangeDisplayAction;
+
+const UiReducer: Reducer<UiState, UiActionsType> = (
+  state = initialState,
+  action
+) => {
+  switch (action.type) {
+    case CHANGE_DISPLAY:
+      return {
+        ...state,
+        display: action.display
+      }
+    default:
+      return state
+  }
+}
+
+export const UiActions = {
+  changeDisplay,
+}
+
+export default UiReducer;