initialize the state, fixes #3

Author: darthmaim

README.md

@@ -42,7 +42,8 @@ You can pass a config object to `syncedReducer`.
 option          | default     | description
 --------------- | ----------- | ------------
 **name**        | `reducer.toString()` | Pass a custom name for the reducer.<br>See [why you might need this](#when-using-multiple-different-syncedreducers-all-receive-the-same-state).
-**skipReducer** | `false` | When the internal action is dispatched, it will call your own reducer with the new value. You can skip this by setting `skipReducer` to `true`.
+**skipReducer** | `false` | When the state is changed in another tab, it will call your own reducer with the new value. You can skip this by setting `skipReducer` to `true`.
+**skipLoading** | `false` | Do not initialize the state with the last value stored in localStorage.
 
 ## Common issues
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "redux-sync-reducer",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "High order reducer to sync partial states between tabs",
   "main": "lib/index.js",
   "scripts": {

src/index.js

@@ -11,6 +11,7 @@ const isSupported = !!(window && window.localStorage);
  */
 const syncedReducers = [];
 
+const LOAD = '@@sync-reducer/init';
 
 /**
  * Get the type of the action.
@@ -49,14 +50,26 @@ export function syncedReducer(reducer, config = {}) {
     const name = config.name || reducer.toString();
     const actionType = getActionType(name);
 
+    let isLoaded = !!config.skipLoading;
+
     syncedReducers.push(name);
 
     return (state, action = {}, ...slices) => {
         switch(action.type) {
             case actionType:
                 return config.skipReducer ? action.payload : reducer(action.payload, action, ...slices);
+            case LOAD:
+                if(!isLoaded) {
+                    isLoaded = true;
+                    return isSupported
+                        ? JSON.parse(localStorage.getItem(getKeyName(name))) || state
+                        : state;
+                }
+                // fallthrough to default case if the state is already loaded
             default:
-                return sync(name, reducer(state, action, ...slices));
+                return isLoaded
+                    ? sync(name, reducer(state, action, ...slices))
+                    : reducer(state, action, ...slices);
         }
     }
 }
@@ -80,5 +93,8 @@ export const syncMiddleware = store => {
         })
     });
 
+    // load all existing states from localStorage
+    store.dispatch({ type: LOAD });
+
     return next => action => next(action);
 }