store distance settings in redux

src/components/App/AppWrapper.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
+import { Provider } from 'react-redux';
 import { RecoilRoot } from 'recoil';
 
 import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
 import teal from '@material-ui/core/colors/teal';
 import deepOrange from '@material-ui/core/colors/deepOrange';
 
+import store from '../../store/createStore';
+
 import ErrorProvider from '../Error/ErrorProvider';
 
 import './App.css';
@@ -18,13 +21,15 @@ const theme = createMuiTheme({
 });
 
 const AppWrapper: React.FC = ({ children }) => (
-  <ThemeProvider theme={theme}>
-    <ErrorProvider>
-      <RecoilRoot>
-        {children}
-      </RecoilRoot>
-    </ErrorProvider>
-  </ThemeProvider>
+  <Provider store={store}>
+    <ThemeProvider theme={theme}>
+      <ErrorProvider>
+        <RecoilRoot>
+          {children}
+        </RecoilRoot>
+      </ErrorProvider>
+    </ThemeProvider>
+  </Provider>
 );
 
 export default AppWrapper;

src/components/Settings/DistanceSettings.tsx

@@ -5,50 +5,62 @@ import {
   InputLabel,
   Typography,
 } from '@material-ui/core';
-import { useRecoilState } from 'recoil';
+import { useDispatch, useSelector } from 'react-redux';
 
-import { defaultDistanceState, maximumDistanceState, minimumDistanceState } from '../../state/app';
 import { storeDistanceSettings } from '../../utils/localStorage';
+import { updateDistanceSettings, UpdateDistanceSettingsPayload } from '../../store/app/actions';
+import {
+  defaultDistanceSelector,
+  maximumDistanceSelector,
+  minimumDistanceSelector,
+} from '../../store/app/selectors';
 
 const DistanceSettings: React.FC = () => {
-  const [defaultState, setDefaultState] = useRecoilState(defaultDistanceState);
-  const [minState, setMinState] = useRecoilState(minimumDistanceState);
-  const [maxState, setMaxState] = useRecoilState(maximumDistanceState);
+  const dispatch = useDispatch();
+
+  const defaultDistanceState = useSelector(defaultDistanceSelector);
+  const minimumDistanceState = useSelector(minimumDistanceSelector);
+  const maximumDistanceState = useSelector(maximumDistanceSelector);
 
-  const [defaultDistance, setDefaultDistance] = useState<number>(defaultState);
-  const [minDistance, setMinDistance] = useState<number>(minState);
-  const [maxDistance, setMaxDistance] = useState<number>(maxState);
+  const [defaultDistance, setDefaultDistance] = useState<number>(defaultDistanceState);
+  const [minDistance, setMinDistance] = useState<number>(minimumDistanceState);
+  const [maxDistance, setMaxDistance] = useState<number>(maximumDistanceState);
 
   useEffect(
     () => {
-      if (defaultState !== defaultDistance) {
-        setDefaultState(defaultDistance);
+      const payload: UpdateDistanceSettingsPayload = {};
+
+      if (defaultDistanceState !== defaultDistance) {
+        payload.defaultDistance = defaultDistance;
       }
 
-      if (minState !== minDistance) {
-        setMinState(minDistance);
+      if (maximumDistanceState !== maxDistance) {
+        payload.maximumDistance = maxDistance;
       }
 
-      if (maxState !== maxDistance) {
-        setMaxState(maxDistance);
+      if (minimumDistanceState !== minDistance) {
+        payload.minimumDistance = minDistance;
       }
 
+      if (Object.keys(payload).length > 0) {
+        dispatch(updateDistanceSettings(payload));
+      }
+
+      // @todo SIDE EFFECT
       storeDistanceSettings({
         defaultDistance,
-        min: minDistance,
         max: maxDistance,
+        min: minDistance,
       });
     },
     [
       defaultDistance,
-      defaultState,
+      defaultDistanceState,
+      dispatch,
       maxDistance,
-      maxState,
+      maximumDistanceState,
       minDistance,
-      minState,
-      setDefaultState,
-      setMaxState,
-      setMinState,
+      minimumDistanceState,
     ],
   );
 

src/state/app.ts

@@ -2,11 +2,6 @@ import { atom } from 'recoil';
 
 import { safeStoredDistance } from '../utils/localStorage';
 
-export const errorState = atom<string | undefined>({
-  key: 'ErrorState',
-  default: undefined,
-});
-
 export const drawerOpenState = atom<boolean>({
   key: 'DrawerOpenState',
   default: true,

src/store/app/actions.ts

@@ -0,0 +1,21 @@
+export interface UpdateDistanceSettingsPayload {
+  defaultDistance?: number;
+  minimumDistance?: number;
+  maximumDistance?: number;
+}
+
+interface UpdateDistanceSettings {
+  type: 'APP_UPDATE_DISTANCE_SETTINGS';
+  payload: UpdateDistanceSettingsPayload;
+}
+
+export function updateDistanceSettings(
+  payload: UpdateDistanceSettingsPayload,
+): UpdateDistanceSettings {
+  return {
+    type: 'APP_UPDATE_DISTANCE_SETTINGS',
+    payload,
+  };
+}
+
+export type AppActions = UpdateDistanceSettings;

src/store/app/reducer.ts

@@ -0,0 +1,26 @@
+import { AppState } from '../types';
+import { safeStoredDistance } from '../../utils/localStorage';
+import { AppActions } from './actions';
+
+const storedDistanceSettings = safeStoredDistance();
+
+const initialState: AppState = {
+  drawerOpened: true,
+  defaultDistance: storedDistanceSettings?.defaultDistance || 10,
+  minimumDistance: storedDistanceSettings?.min || 1,
+  maximumDistance: storedDistanceSettings?.max || 50,
+};
+
+function app(state = initialState, action: AppActions): AppState {
+  switch (action.type) {
+    case 'APP_UPDATE_DISTANCE_SETTINGS':
+      return {
+        ...state,
+        ...action.payload,
+      };
+    default:
+      return state;
+  }
+}
+
+export default app;

src/store/app/selectors.ts

@@ -0,0 +1,20 @@
+import { createSelector } from 'reselect';
+
+import { AppState, StoreState } from '../types';
+
+const appState = (state: StoreState): AppState => state.app;
+
+export const defaultDistanceSelector = createSelector(
+  appState,
+  (state) => state.defaultDistance,
+);
+
+export const maximumDistanceSelector = createSelector(
+  appState,
+  (state) => state.maximumDistance,
+);
+
+export const minimumDistanceSelector = createSelector(
+  appState,
+  (state) => state.minimumDistance,
+);

src/store/createStore.ts

@@ -0,0 +1,18 @@
+import { applyMiddleware, combineReducers, createStore } from 'redux';
+import { composeWithDevTools } from 'redux-devtools-extension';
+
+import app from './app/reducer';
+
+const reducers = combineReducers({
+  app,
+});
+
+const store = createStore(
+  reducers,
+  undefined,
+  composeWithDevTools(
+    applyMiddleware(),
+  ),
+);
+
+export default store;

src/store/types.ts

@@ -0,0 +1,10 @@
+export interface AppState {
+  drawerOpened: boolean;
+  defaultDistance: number;
+  minimumDistance: number;
+  maximumDistance: number;
+}
+
+export interface StoreState {
+  app: AppState;
+}