HomePage with Immer

package.json

@@ -21,6 +21,7 @@
     "axios": "0.21.4",
     "core-js": "3.2.1",
     "history": "4.10.1",
+    "immer": "^9.0.15",
     "prop-types": "15.7.2",
     "ramda": "0.26.1",
     "react": "17.0.1",

src/Components/Pages/HomePage/homePageActions.js

@@ -10,7 +10,7 @@ export const HOMEPAGE_ACTIONS = {
 
 const userPositionWeatherRequested = () => ({
   type: HOMEPAGE_ACTIONS.USER_POSITION_WEATHER_REQUESTED
-})
+});
 
 const userPositionWeatherReceived = ({ currentWeather }) => ({
   type: HOMEPAGE_ACTIONS.USER_POSITION_WEATHER_RECEIVED,

src/Components/Pages/HomePage/homePageReducer.js

@@ -1,29 +1,27 @@
 import initialState from './homePageInitialState';
 import { HOMEPAGE_ACTIONS } from './homePageActions';
+import produce from 'immer';
 
-export const homePageReducer = (state = initialState, { type, payload }) => {
+const homePageReducer = (state = initialState, { type, payload }) => {
   switch (type) {
     case HOMEPAGE_ACTIONS.USER_POSITION_WEATHER_REQUESTED:
-      return {
-        ...state,
-        loading: true,
-        error: null
-      };
+      return produce(state, draft => {
+        draft.loading = true;
+        draft.error = null;
+      });
     case HOMEPAGE_ACTIONS.USER_POSITION_WEATHER_RECEIVED:
-      return {
-        ...state,
-        loading: false,
-        currentWeather: payload.currentWeather
-      };
+      return produce(state, draft => {
+        draft.loading = false;
+        draft.currentWeather = payload.currentWeather;
+      });
     case HOMEPAGE_ACTIONS.USER_POSITION_WEATHER_FAILED:
-      return {
-        ...state,
-        loading: false,
-        error: payload
-      };
+      return produce(state, draft => {
+        draft.loading = false;
+        draft.error = payload;
+      });
     default:
       return state;
   }
 };
 
-export default homePageReducer;
+export default homePageReducer;

src/Components/Pages/HomePage/homePageSelectors.js

@@ -1,2 +1,2 @@
 export const getCurrentWeather = state => state.homePage.currentWeather;
-export const getLoading = state => state.homePage.loading;
+export const getLoading = state => state.homePage.loading;

src/Store/actions/geoActions.js

@@ -8,8 +8,8 @@ const userGeoDataReceived = ({ position, location }) => ({
 });
 
 export const fetchUserGeoData = () => async dispatch => {
-    const position = await getUserCurrentPosition();
-    const { longitude, latitude } = position.coords;
-    const location = await getLocationByCoords(longitude, latitude);
-    return dispatch(userGeoDataReceived({ position: position.coords, location }));
+  const position = await getUserCurrentPosition();
+  const { longitude, latitude } = position.coords;
+  const location = await getLocationByCoords(longitude, latitude);
+  return dispatch(userGeoDataReceived({ position: position.coords, location }));
 };

src/Store/reducers/geoReducer.js

@@ -1,20 +1,21 @@
+import produce from 'immer';
+
 export const GEO_ACTIONS = {
   USER_GEO_DATA_RECEIVED: 'USER_GEO_DATA_RECEIVED'
 };
 
 const initialState = {
   position: null,
-  location: null,
+  location: null
 };
 
-export const geoReducer = (state = initialState, { type, payload }) => {
+const geoReducer = (state = initialState, { type, payload }) => {
   switch (type) {
     case GEO_ACTIONS.USER_GEO_DATA_RECEIVED:
-      return {
-        ...state,
-        position: payload.position,
-        location: payload.location,
-      };
+      return produce(state, draft => {
+        draft.position = payload.position;
+        draft.location = payload.location;
+      });
     default:
       return state;
   }