Fix Initial State Migration Bug (#399)

* Fix Initial State Migration Bug

This commit fixes a bug where the merging of the
initial state and the persisted state when creating
the redux store caused the latest version to get
attached to the old version. This prevented the
migration from functioning properly since the
version was the latest even though the data was not.

Now, the initial state isn't given when creating
the store, so the only starting state used comes
from the persisted local storage state (if it exists).
The top level reducer uses the initial state if the
incoming state is null. This does not affect any other
parts of the frontend but should prevent migration
issues when the persisted state is v0.0.0

* Run migrator on init action

This commit updates the top level reducer to run the
migrators on the init action. This should allow us to
properly initialize the store using the migrator without
having to go through full reducer cycle.

packages/frontend/src/state/actions.js

@@ -14,6 +14,7 @@ export const GLOBAL_ACTIONS = {
   RESET: '@@RESET',
   SET_THEME: '@@SET_THEME',
   MIGRATE_STATE: '@@MIGRATE_STATE',
+  INIT: '@@INIT',
 };
 
 export const globalActions = {

packages/frontend/src/state/configureStore.js

@@ -2,7 +2,6 @@ import { createStore, applyMiddleware, compose } from 'redux';
 import thunk from 'redux-thunk';
 import persistState from 'redux-localstorage';
 import topLevelReducer from './reducers';
-import { initialState } from './migrators';
 import profileAttributeValidationMiddleware from './middleware/profiles/profileAttributeValidationMiddleware';
 import profileFormValidationMiddleware from './middleware/profiles/profileFormValidationMiddleware';
 import settingsAttributeValidationMiddleware from './middleware/settings/settingsAttributeValidationMiddleware';
@@ -14,7 +13,7 @@ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 export default function configureStore() {
   return createStore(
     topLevelReducer,
-    initialState,
+    null,
     composeEnhancers(
       applyMiddleware(
         profileAttributeValidationMiddleware,

packages/frontend/src/state/reducers.js

@@ -12,16 +12,25 @@ import navbarReducer from './reducers/navbar/navbarReducer';
 import { GLOBAL_ACTIONS } from './actions';
 import topLevelMigrator, { initialState } from './migrators';
 
-const topLevelReducer = (state = initialState, action) => {
+const topLevelReducer = (startState, action) => {
   // Return State if a null/undefined action is given
   if (!action) {
-    return state;
+    return startState || initialState;
   }
+
+  // Check for migration and perform it
+  if (action.type === GLOBAL_ACTIONS.MIGRATE_STATE || action.type === GLOBAL_ACTIONS.INIT) {
+    return topLevelMigrator(startState);
+  }
+
   // Check for reset and return initial state
   if (action.type === GLOBAL_ACTIONS.RESET) {
     return { ...initialState };
   }
 
+  // Use initial state if start state isn't given
+  const state = startState || initialState;
+
   // Check for set theme and adjust it here
   if (action.type === GLOBAL_ACTIONS.SET_THEME) {
     if (action.theme) {
@@ -34,11 +43,6 @@ const topLevelReducer = (state = initialState, action) => {
     return { ...state };
   }
 
-  // Check for migration and perform it
-  if (action.type === GLOBAL_ACTIONS.MIGRATE_STATE) {
-    return topLevelMigrator(state);
-  }
-
   // If not a global action, handle the action with sub reducers
   const changes = {
     tasks: taskListReducer(state.tasks, action),