Immer (#2380)

Migrating react-boilerplate to immer!

Immediate benefits:
- Immutable data without the need to use Immutable's custom data types
- Essentially no learning curve
- Removes over 50k from our builds
- Trivial to remove for anyone who doesn't want it. We could even add it as an option in the generators.

Co-authored-by: null <[email protected]>

Author: julienben

app/app.js

@@ -12,7 +12,7 @@ import '@babel/polyfill';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
-import { ConnectedRouter } from 'connected-react-router/immutable';
+import { ConnectedRouter } from 'connected-react-router';
 import FontFaceObserver from 'fontfaceobserver';
 import history from 'utils/history';
 import 'sanitize.css/sanitize.css';

app/configureStore.js

@@ -3,34 +3,31 @@
  */
 
 import { createStore, applyMiddleware, compose } from 'redux';
-import { fromJS } from 'immutable';
-import { routerMiddleware } from 'connected-react-router/immutable';
+import { routerMiddleware } from 'connected-react-router';
 import createSagaMiddleware from 'redux-saga';
 import createReducer from './reducers';
 
 export default function configureStore(initialState = {}, history) {
-  // If Redux DevTools Extension is installed use it, otherwise use Redux compose
-  /* eslint-disable no-underscore-dangle, indent */
-  const composeEnhancers =
-    process.env.NODE_ENV !== 'production' &&
-    typeof window === 'object' &&
-    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
-      ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({})
-      : compose;
-
-  // NOTE: Uncomment the code below to restore support for Redux Saga
-  // Dev Tools once it supports redux-saga version 1.x.x
-
-  // const reduxSagaMonitorOptions =
-  //   process.env.NODE_ENV !== 'production' &&
-  //   typeof window === 'object' &&
-  //   window.__SAGA_MONITOR_EXTENSION__
-  //     ? { sagaMonitor: window.__SAGA_MONITOR_EXTENSION__ }
-  //     : {};
-  /* eslint-enable */
-
-  // const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
-  const sagaMiddleware = createSagaMiddleware({});
+  let composeEnhancers = compose;
+  const reduxSagaMonitorOptions = {};
+
+  // If Redux Dev Tools and Saga Dev Tools Extensions are installed, enable them
+  /* istanbul ignore next */
+  if (process.env.NODE_ENV !== 'production' && typeof window === 'object') {
+    /* eslint-disable no-underscore-dangle */
+    if (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__)
+      composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});
+
+    // NOTE: Uncomment the code below to restore support for Redux Saga
+    // Dev Tools once it supports redux-saga version 1.x.x
+    // if (window.__SAGA_MONITOR_EXTENSION__)
+    //   reduxSagaMonitorOptions = {
+    //     sagaMonitor: window.__SAGA_MONITOR_EXTENSION__,
+    //   };
+    /* eslint-enable */
+  }
+
+  const sagaMiddleware = createSagaMiddleware(reduxSagaMonitorOptions);
 
   // Create the store with two middlewares
   // 1. sagaMiddleware: Makes redux-sagas work
@@ -41,7 +38,7 @@ export default function configureStore(initialState = {}, history) {
 
   const store = createStore(
     createReducer(),
-    fromJS(initialState),
+    initialState,
     composeEnhancers(...enhancers),
   );
 

app/containers/App/reducer.js

@@ -1,46 +1,46 @@
 /*
  * AppReducer
  *
- * The reducer takes care of our data. Using actions, we can change our
- * application state.
- * To add a new action, add it to the switch statement in the reducer function
+ * The reducer takes care of our data. Using actions, we can
+ * update our application state. To add a new action,
+ * add it to the switch statement in the reducer function
  *
- * Example:
- * case YOUR_ACTION_CONSTANT:
- *   return state.set('yourStateVariable', true);
  */
 
-import { fromJS } from 'immutable';
-
+import produce from 'immer';
 import { LOAD_REPOS_SUCCESS, LOAD_REPOS, LOAD_REPOS_ERROR } from './constants';
 
 // The initial state of the App
-const initialState = fromJS({
+export const initialState = {
   loading: false,
   error: false,
   currentUser: false,
   userData: {
     repositories: false,
   },
-});
+};
+
+/* eslint-disable default-case, no-param-reassign */
+const appReducer = (state = initialState, action) =>
+  produce(state, draft => {
+    switch (action.type) {
+      case LOAD_REPOS:
+        draft.loading = true;
+        draft.error = false;
+        draft.userData.repositories = false;
+        break;
+
+      case LOAD_REPOS_SUCCESS:
+        draft.userData.repositories = action.repos;
+        draft.loading = false;
+        draft.currentUser = action.username;
+        break;
 
-function appReducer(state = initialState, action) {
-  switch (action.type) {
-    case LOAD_REPOS:
-      return state
-        .set('loading', true)
-        .set('error', false)
-        .setIn(['userData', 'repositories'], false);
-    case LOAD_REPOS_SUCCESS:
-      return state
-        .setIn(['userData', 'repositories'], action.repos)
-        .set('loading', false)
-        .set('currentUser', action.username);
-    case LOAD_REPOS_ERROR:
-      return state.set('error', action.error).set('loading', false);
-    default:
-      return state;
-  }
-}
+      case LOAD_REPOS_ERROR:
+        draft.error = action.error;
+        draft.loading = false;
+        break;
+    }
+  });
 
 export default appReducer;

app/containers/App/selectors.js

@@ -3,39 +3,40 @@
  */
 
 import { createSelector } from 'reselect';
+import { initialState } from './reducer';
 
-const selectGlobal = state => state.get('global');
+const selectGlobal = state => state.global || initialState;
 
-const selectRouter = state => state.get('router');
+const selectRouter = state => state.router;
 
 const makeSelectCurrentUser = () =>
   createSelector(
     selectGlobal,
-    globalState => globalState.get('currentUser'),
+    globalState => globalState.currentUser,
   );
 
 const makeSelectLoading = () =>
   createSelector(
     selectGlobal,
-    globalState => globalState.get('loading'),
+    globalState => globalState.loading,
   );
 
 const makeSelectError = () =>
   createSelector(
     selectGlobal,
-    globalState => globalState.get('error'),
+    globalState => globalState.error,
   );
 
 const makeSelectRepos = () =>
   createSelector(
     selectGlobal,
-    globalState => globalState.getIn(['userData', 'repositories']),
+    globalState => globalState.userData.repositories,
   );
 
 const makeSelectLocation = () =>
   createSelector(
     selectRouter,
-    routerState => routerState.get('location').toJS(),
+    routerState => routerState.location,
   );
 
 export {

app/containers/App/tests/reducer.test.js

@@ -1,19 +1,20 @@
-import { fromJS } from 'immutable';
+import produce from 'immer';
 
 import appReducer from '../reducer';
 import { loadRepos, reposLoaded, repoLoadingError } from '../actions';
 
+/* eslint-disable default-case, no-param-reassign */
 describe('appReducer', () => {
   let state;
   beforeEach(() => {
-    state = fromJS({
+    state = {
       loading: false,
       error: false,
       currentUser: false,
-      userData: fromJS({
+      userData: {
         repositories: false,
-      }),
-    });
+      },
+    };
   });
 
   it('should return the initial state', () => {
@@ -22,10 +23,11 @@ describe('appReducer', () => {
   });
 
   it('should handle the loadRepos action correctly', () => {
-    const expectedResult = state
-      .set('loading', true)
-      .set('error', false)
-      .setIn(['userData', 'repositories'], false);
+    const expectedResult = produce(state, draft => {
+      draft.loading = true;
+      draft.error = false;
+      draft.userData.repositories = false;
+    });
 
     expect(appReducer(state, loadRepos())).toEqual(expectedResult);
   });
@@ -37,10 +39,11 @@ describe('appReducer', () => {
       },
     ];
     const username = 'test';
-    const expectedResult = state
-      .setIn(['userData', 'repositories'], fixture)
-      .set('loading', false)
-      .set('currentUser', username);
+    const expectedResult = produce(state, draft => {
+      draft.userData.repositories = fixture;
+      draft.loading = false;
+      draft.currentUser = username;
+    });
 
     expect(appReducer(state, reposLoaded(fixture, username))).toEqual(
       expectedResult,
@@ -51,7 +54,10 @@ describe('appReducer', () => {
     const fixture = {
       msg: 'Not found',
     };
-    const expectedResult = state.set('error', fixture).set('loading', false);
+    const expectedResult = produce(state, draft => {
+      draft.error = fixture;
+      draft.loading = false;
+    });
 
     expect(appReducer(state, repoLoadingError(fixture))).toEqual(
       expectedResult,

app/containers/App/tests/selectors.test.js

@@ -1,5 +1,3 @@
-import { fromJS } from 'immutable';
-
 import {
   selectGlobal,
   makeSelectCurrentUser,
@@ -11,10 +9,10 @@ import {
 
 describe('selectGlobal', () => {
   it('should select the global state', () => {
-    const globalState = fromJS({});
-    const mockedState = fromJS({
+    const globalState = {};
+    const mockedState = {
       global: globalState,
-    });
+    };
     expect(selectGlobal(mockedState)).toEqual(globalState);
   });
 });
@@ -23,11 +21,11 @@ describe('makeSelectCurrentUser', () => {
   const currentUserSelector = makeSelectCurrentUser();
   it('should select the current user', () => {
     const username = 'mxstbr';
-    const mockedState = fromJS({
+    const mockedState = {
       global: {
         currentUser: username,
       },
-    });
+    };
     expect(currentUserSelector(mockedState)).toEqual(username);
   });
 });
@@ -36,11 +34,11 @@ describe('makeSelectLoading', () => {
   const loadingSelector = makeSelectLoading();
   it('should select the loading', () => {
     const loading = false;
-    const mockedState = fromJS({
+    const mockedState = {
       global: {
         loading,
       },
-    });
+    };
     expect(loadingSelector(mockedState)).toEqual(loading);
   });
 });
@@ -49,38 +47,39 @@ describe('makeSelectError', () => {
   const errorSelector = makeSelectError();
   it('should select the error', () => {
     const error = 404;
-    const mockedState = fromJS({
+    const mockedState = {
       global: {
         error,
       },
-    });
+    };
     expect(errorSelector(mockedState)).toEqual(error);
   });
 });
 
 describe('makeSelectRepos', () => {
   const reposSelector = makeSelectRepos();
   it('should select the repos', () => {
-    const repositories = fromJS([]);
-    const mockedState = fromJS({
+    const repositories = [];
+    const mockedState = {
       global: {
         userData: {
           repositories,
         },
       },
-    });
+    };
     expect(reposSelector(mockedState)).toEqual(repositories);
   });
 });
 
 describe('makeSelectLocation', () => {
   const locationStateSelector = makeSelectLocation();
   it('should select the location', () => {
-    const mockedState = fromJS({
-      router: { location: { pathname: '/foo' } },
-    });
-    expect(locationStateSelector(mockedState)).toEqual(
-      mockedState.getIn(['router', 'location']).toJS(),
-    );
+    const router = {
+      location: { pathname: '/foo' },
+    };
+    const mockedState = {
+      router,
+    };
+    expect(locationStateSelector(mockedState)).toEqual(router.location);
   });
 });